loading...
Cover image for πŸ€“πŸ”₯How To Make Websites Accessible To All πŸ’―

πŸ€“πŸ”₯How To Make Websites Accessible To All πŸ’―

devxify profile image Ankit Updated on ・5 min read

Hey, I'm Ankit a lover of "Accessible & Fast Web". Have you ever thought that how blessed we are to be normal ?
If not, then you better start.

As a part of the web developer community its our job to ensure that the web is accessible to all. The W3 even has a separate guidelines for web content accessibility . After all the web should be a better place to be even if the world isn't.

Alt Text

Today let's talk about the basics and let's see if I can help you be at-least semi-compliant with WCAG 2.1. In this article I would be guiding you through the steps to make you webpage accessible with devices like screen reader. Let's begin.

Pages Must Have Proper Title

This the most basic tip you will ever read or listen regarding web accessibility. Having a proper title ensure that the specially-abled visitor gets a quick info of what the page is about. I request you to use terms like page 1, blog. It's horrible, instead use phrases like Continuation of Abc article or Dev.to Blog, One stop for all developers.

<!-- ❌ Homepage? Does that even has proper meaning? -->
<title>Homepage</title>

<!-- βœ… Descriptive -->
<title>Devxify - Level Up Your Web Development Skills</tile>

Though its easy to understand but still there are few things to remember when writing a title.

  1. Must be descriptive
  2. Must not be used to fool visitors
  3. Title should be unique from page to page

Proper Labelling of Elements

Not all of your visitors would be reading your text, some might be using tools like screen reader. As a developer you must ensure that all of the required elements are marked properly for screen readers. In an article about HTML form design , I too talked about form labeling. Labeling ensures that your visitor is given information in a way you want. Coming back to topic, labeling and giving role can be easily done using aria-label, aria-labelledby, role and others.

<!-- Example 1: The role tells that it's is a separator for section/page -->
<span class="has-text-centered is-size-4 has-text-grey-light" role="separator">β€’ β€’ β€’</span>

<!-- Example 2: Aria Label tells page reader about external page -->
<p>Hie I am <a target="_blank" href="https://twitter.com/devxify" aria-label="Devxify Website">Devxify</a>, wbu</p>

<!-- Example 3: Telling Screen Reader About Navigation -->
<nav role="navigation">

</nav>

Links Must Have Descriptive Name

Whenever using an anchor tag to add links to your website, remember that the linked text should give a brief hint of the following linked page. Don’t use texts like more, go, see to link to other pages/articles on or outside your site. It is bad.

<!-- ❌ Link with non descriptive text -->
<a href="/funny-cat.png">more</a>

<!-- βœ… Link with descriptive text -->
<a href="/funny-cat.png">more funny cat pic</a>

Semantic Use of Heading

Headings partly define the structure of the webpage. When you mess up with it then you mess up with your content structure too. Heading tags should always be using according to their hierarchy and a page must contain only a single H1 tag, below is an example of correct and wrong use of heading structure.

<!-- ❌ Page should have single H1 tag -->
<h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h2>Heading 2</h2>
<h1>Heading 1</h1>

<!-- ❌ Heading should be structured -->
<!-- Like H3 cannot be placed under H2 -->
<h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h2>Heading 2</h2>
        <h3>Heading 3</h3>
    <h2>Heading 2</h2> 

<!-- βœ… Structured heading tags with hiearchy -->            
<h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <section>
        <h3>Heading 3</h3>
    </section>
    <h2>Heading 2</h2> 

Making Font Size Readable

Does your webpage have proper font size? You might have written an awesome blog or guide but is that of any use when people can’t even read that?

There is a suggested size of min 11px for text on page but that might not be the number you should stick too. As a webmaster you should know your audience, are your audience elderly people or people with poor eyesight? If that’s the case, then you better have a higher number than said 11px.

Apart from sticking with px as a unit for your font-size, try dynamic units like rem and em which change font-size according to the viewport.

Elaborating Text In HTML

Sometime use shortforms of text which aren't known by everybody like BBC (British Broadcasting Channel? Confusion). For this we have abbreviation tags at our service.

The <abbr title="British Broadcasting Corporation">BBC</abbr> is a great platform.

Semantic Use Of HTML Tags

HTML has few tags which visually do the same thing but are actually different and very few developers know this.

For example <strong> and <b> tag visually do the same thing which is making text bold. Semantically they are different, <strong> tag is to bold the text and also mark this as important part of the text whereas <b> tag is just a visual element to show text in bold format.

<strong> I am really important</strong>

<b>I am just a bold text</b>

This also means that you need to use the correct tags for the correct purpose. For example buttons must be enclosed between <button> tag and not <a> tag. Similarly on-page functions like onClick JavaScript functions should use <button> and not <a>.

<!-- βœ… Using Button tag for buttons -->
<button>Click Me</button>

<!-- ❌ Using Anchor Tag for buttons is semantically wrong -->
<a>Click Me</a>

<!-- βœ… Using Button tag for JS function -->
<button onClick="demo()">Click Me</button>

<!-- ❌ Using Anchor Tag for for same is wrong -->
<a onClick="demo()">Click Me</a>

Conclusion

Did you like what I wrote? Feel free to share your views in the comment section. Also if you wish to check how much accessible your website is then the best tools would be Google LightHouse and Accessibe's Ace. These tools will provide you with a comprehensive list of tests your webpage passed and one's failed.

Hope you like this article, if you have any other thoughts then feel free to tweet Devxify on twitter. Also, for more freshly brewed content subscribe to our newsletter.

Also feel free to visit Devxify.

Posted on Jun 4 by:

devxify profile

Ankit

@devxify

I love to discuss about everything which makes the web better. Like web performance, accessibility, security and other similar stuff. If you wish to then I'm open at twitter or hi[at]devxify.com

Discussion

markdown guide
 

"tag is to bold the text and also mark this as important part of the text whereas tag is just a visual element to show text in bold format." - maybe want to specify which tag does what? I just saw @iannismccluskey commented about it, but I'll share my thoughts about it too.

I would also recommend reading the book Accessibility for Everyone by Laura Kalbag, I'm currently reading it myself and it's good.

 

Sorry there was an error (technical error) where it wasn't detecting html tags I wrote in markdown. Would you mind rechecking the section again?

 

Now it displays the tags. πŸ™‚

Do you like and understand it now?

Yes, the <strong> tag and <b> tag both visually changes the text to bold but only <strong> mark it as important to screen readers if I read that correctly.

Hint, you can use single backticks (`) to indicate code in a paragraph.

Ah thanks for the suggestion didn't knew I could use (`) to mark code I used &lt; and &gt; instead and it gets the work done.

 

Hey, "Proper Labelling of Elements" is missing the aria-label attribute.... I think you intended to include it?

 

Oopsie, thanks. Will fix it asap.

 

Nice article. But you may want to rewrite the "Knowing Use Of Tags" section. I read it three times and still don't really understand what you meant.

 

Yeah, I got that. I'm trying to find a way. Any suggestions?

 

Is it due to HTML tags that were interpreted instead of being displayed ?

Actually what I wanted to say is "Web Developers" don't know the difference between similar tags.

For example, strong tag and b tag both visually do the same thing but are semantically different.

Strong tag is to bold a text which needs to be emphasized or is important.
B tag is just a visual element for bold text.

Also I have updated the part and changed title to "Semantic Use Of Tags", how does it look? updated the content too.

Updated: Just understood what you wished to say, updated now with proper tags being shown.

 
 

Thanks, this is my first article here and glad to have such review. I'll try to add few more points too.