When we talk about website design, we're usually talking about how these sites look visually — how colors and font work together, how page elements are arranged and spaced, and whether navigation links are in the correct places.
However, because not everyone uses websites in this manner, we must also consider non-visual components of design.
According to the WHO, "Globally, at least 2.2 billion people have a near or distance vision impairment. In at least 1 billion – or almost half – of these cases, vision impairment could have been prevented or has yet to be addressed".
Many of these folks use screen readers and other assistive devices to navigate websites and other digital information.
It is your responsibility as a designer, developer, and/or website owner to make your website accessible to this demographic.
In this post I will talk about four simple steps to make your website more accessible.
This is by no mean complete! However, I believe, it is a good start.
Screen Reader What?
Briefly speaking, a screen reader is a software that transforms digital text into an audio and/or tactile format.
It is possible to install screen readers on a device, or use browser extensions, to ease the interaction with apps and websites.
Thus, you can find screen readers for Windows, macOS, Linux, iOS, and Android, etc.
People who are blind or have low vision, as well as those with cognitive disabilities that prevent them from perceiving onscreen text and media, utilize screen readers to engage with their devices in a non-visual manner.
Many screen readers have extra capabilities that assist users in navigating online, using apps, and or using OS interfaces.
Inclusive Design
Given the ubiquity and relevance of screen readers today, we must take accessibility into account while creating and maintaining websites.
This guarantees that all visitors can access the content of a website and have the best possible experience.
Because screen readers scan HTML files directly to interpret web pages, this file should contain everything the reader requires.
Here are some simple actions you can take to assist screen readers in processing your pages and make your website easier to browse for them.
1. Semantic HTML
Structural, semantic HTML is the key starting point toward good accessibility practices.
web-accessibility.carnegiemuseums.org
When a screen reader or other assistive device scans a web page, it obtains information about the document's Document Object Model (DOM), or HTML structure. A screen reader will not read any styles or JavaScript.
Semantic HTML improves the readability of HTML by properly describing the various sections and layouts of web pages.
It improves the content interpretation of browsers and search engines by making web pages more informative and adaptive.
Semantic HTML is not only good for accessibility, but it makes your code more readable for other developers and improves SEO.
Here is a quick example:
HTML page in non-semantic HTML:
<html>
<head>
<title>Example</title>
</head>
<body>
<div id="header">
Some menu or navigation bar, etc.
</div>
<div id="main-content">
Main content
</div>
<div id="footer">
Footer
</div>
</body>
</html>
Same page using semantic HTML
<html>
<head>
<title>Example</title>
</head>
<body>
<header>
Some menu or navigation bar, etc.
</header>
<main>
Main content
</main>
<footer>
Footer
</footer>
</body>
</html>
As you noticed, div tags have been replaced with: header, main, and footer.
HTML tags are used by screen readers to grasp the page's content and areas, as well as which items are available for the user to select.
As a result, using semantic HTML is of primary importance to make your web pages accessible.
This is a simple example and there are many more semantic elements. See a list of semantic HTML elements.
ARIA roles
Alternatively, you can use ARIA roles.
"ARIA roles can be used to describe elements that don't natively exist in HTML or exist but don't yet have full browser support." MDN.
Furthermore, because div and span elements are generic and not semantically rich, ARIA roles should only be used in these tags.
ARIA landmarks should not be used in tags like menu, nav, form, and main because their purpose is already clear by their names.
2. Declare language in the tag
A screen reader requires information about the language in which a web page is written so that it can use text-to-Speech (TTS) to pronounce words for the user.
For page-wide language information, screen readers will seek for the lang attribute inside the html tag.
If a page is written in English, for example, the opening html tag should be:
<html lang="en">
3. Use alt text
While SEO is clearly an advantage, the primary goal of alternative text is to provide an alternative for media material to screen readers.
When a screen reader encounters an image, video, or other piece of media, it will read the alt text if it is available.
Screen readers will disregard the image or read the image file name if no alt text is provided.
Using an example from MDN, your alt text might look like this:
<img src="dinosaur.png"
alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
You may want to add a title attribute to provide extra contextual information.
In this case, most screen readers will read out
- the alt text,
- the title attribute, and
- the filename.
In addition, browsers display title text as tooltips when moused over.
4. Test Accessibility
Simply test your app with a screen reader after implementing accessibility measures.
- Using an online accessibility testing tool
- Using a browser extension
- Using NV Access or VoiceOver on Mac.
You could even try to navigate your website without using a mouse or without looking at the screen!
Top comments (0)