Please enable JS

Accessibility

Graphic Design & Web Design Accessibility Basics

R Proffitt
by Richard Proffitt
iopan design

Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat, ata umasnu purus. Maecenas volutpat, diam enim sagittis quam, id prta quam. Sed id dolor consectetur. Loremus fermentum nibh volutpat, accumsan purus.

Perspiciatis unde omnis iste natus error sit voluptatem accus anum doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae.

Web Design Accessibility Principles

Below you will find a list of some key principles of accessible design. Most accessibility principles can be implemented very easily and will not impact the overall "look and feel" of your web site.

1. Provide appropriate alternative (alt) text

Alternative text provides a textual alternative to non-text content in web pages. It is especially helpful for people who are blind and rely on a screen reader to have the content of the website read to them.

EXAMPLE ONE
<img src="/images/william-burroughs.jpg" alt="Photograph of William S. Burroughs,
American writer and artist" />
EXAMPLE TWO
<img src="/images/manchester.jpg" alt="Aerial photograph of Greater Manchester, UK" />

2. Provide appropriate document structure

Headings, lists, and other structural elements provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page.

3. Provide headers for data tables

Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the <th> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.

EXAMPLE ONE: Table with header cells in the top row only
Date Colour Room
23rd September 2018 Yellow 5G
12th February 2019 Blue 17A
3rd April 2019 Green 22K
<table>
<tr>
<th>Date</th>
<th>Colour</th>
<th>Room</th>
</tr>
<tr>
<td>23rd September 2018</td> <td>Yellow</td> <td>5G</td> </tr> <tr> […] </table>
EXAMPLE TWO: Table with header cells in the first column only
Date 23rd September 2018 12th February 2019 3rd April 2019
Colour Yellow Blue Green
Room 5G 17A 22K
<table>
<tr>
<th>Date</th>
<td>23rd September 2018</td>
<td>12th February 2019</td>
<td>3rd April 2019</td>
</tr>
<tr>
<th>Colour</th>
<td>Yellow</td>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<th>Room</th>
<td>5G</td>
<td>17A</td>
<td>22K</td>
</tr>
</table>

4. Ensure users can complete and submit all forms

Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the <label> element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.

5. Ensure links make sense out of context

Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided.

6. Caption and/or provide transcripts for media

Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient.

7. Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content.

In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.

8. Allow users to skip repetitive elements on the page

You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Main Content," or "Skip Navigation" link at the top of the page which jumps to the main content of the page.

9. Do not rely on color alone to convey meaning

The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.

10. Make sure content is clearly written and easy to read

There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately.

11. Make JavaScript accessible

Ensure that JavaScript event handlers are device independent (e.g., they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function.

12. Design to standards

HTML compliant and accessible pages are more robust and provide better search engine optimization. Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content.

img
Convallis nisl

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae.

“If you’re not prepared to be wrong, you’ll never come up with anything original.” –

Sir Ken Robinson

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

img

Graphic Design Accessibility Principles

The following list looks at some key principles of accessible design from the graphics perspective. Again, these accessibility principles can be implemented easily, especially if they are taken onboard at the very beginning of a design project.

1. Use Appropriate Colours and Colour Contrast

Some eye diseases lead to a decrease of sensitivity to color contrast. Many modern design layouts are very detail-oriented, using very subtle colors to create a clean and modern interface design.

It may not be particularly ‘Trendy’ but try to avoid this type of design using very subtle colours as it makes it difficult for a user who struggles to distinguish colors. Try to ensure at least a 70% difference in colour value between, say, type and a background tone.

EXAMPLE ONE: Poor Contrast
This May Be Trendy, But the Accessibility Sucks!

Brooklyn crucifix iceland normcore glossier jianbing godard disrupt hammock palo santo. PBR&B occupy gastropub tofu kinfolk biodiesel green juice marfa paleo tbh drinking vinegar next level. Live-edge chambray disrupt four loko paleo air plant sartorial.

EXAMPLE TWO: Better Contrast
A Much more Inclusive Level of Colour Contrast

Fam kitsch pitchfork, knausgaard iceland squid umami tacos forage adaptogen. Lumbersexual put a bird on it air plant irony. Pinterest forage listicle health goth pitchfork deep v beard schlitz austin. Cliche disrupt flexitarian, seitan freegan helvetica.

In order to achieve optimum contrast between hues try pairing complementary colours (i.e., opposites on the colour wheel). However, if the paired colours’ saturation, value and intensity are too similar, the phenomenon of simultaneous contrast creates vibration. This optical illusion causes eyestrain in many readers and can compromise legibility.

EXAMPLE THREE: Optimum Contrast Between Hues

Brooklyn crucifix iceland normcore glossier jianbing godard disrupt hammock palo santo. PBR&B occupy gastropub tofu kinfolk biodiesel green juice marfa paleo tbh drinking vinegar next level. Live-edge chambray disrupt four loko paleo air plant sartorial.

EXAMPLE FOUR: Beware the Phenomenon of Vibration

Fam kitsch pitchfork, knausgaard iceland squid umami tacos forage adaptogen. Lumbersexual put a bird on it air plant irony. Pinterest forage listicle health goth pitchfork deep v beard schlitz austin. Cliche disrupt flexitarian, seitan freegan helvetica.


2. Typography: Legibility & Readability

These are two related but different concepts: Legibility is determined by the specific typographic traits affecting recognition of letters and words. As we read, we identify the overall shapes of familiar words rather than processing individual letters and assembling them into phonetic groups. This allows us to process content much faster. The key typographic factors are shape, scale, and style.

Readability refers to the clarity and speed with which content can be digested over an expanse of text such as a paragraph or a page. Readability is related to a font’s legibility but is also influenced by design and layout decisions. The chief factors determining whether text is readable are dimension, spacing and alignment.

3. Provide headers for data tables

Tables are used online for layout and to organize data. Tables that are used to organize tabular data should have appropriate table headers (the <th> element). Data cells should be associated with their appropriate headers, making it easier for screen reader users to navigate and understand the data table.

EXAMPLE ONE: Table with header cells in the top row only
Date Colour Room
23rd September 2018 Yellow 5G
12th February 2019 Blue 17A
3rd April 2019 Green 22K
<table>
<tr>
<th>Date</th>
<th>Colour</th>
<th>Room</th>
</tr>
<tr>
<td>23rd September 2018</td> <td>Yellow</td> <td>5G</td> </tr> <tr> […] </table>
EXAMPLE TWO: Table with header cells in the first column only
Date 23rd September 2018 12th February 2019 3rd April 2019
Colour Yellow Blue Green
Room 5G 17A 22K
<table>
<tr>
<th>Date</th>
<td>23rd September 2018</td>
<td>12th February 2019</td>
<td>3rd April 2019</td>
</tr>
<tr>
<th>Colour</th>
<td>Yellow</td>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<th>Room</th>
<td>5G</td>
<td>17A</td>
<td>22K</td>
</tr>
</table>

4. Ensure users can complete and submit all forms

Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that label is associated to the correct form element using the <label> element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields.

5. Ensure links make sense out of context

Every link should make sense if the link text is read by itself. Screen reader users may choose to read only the links on a web page. Certain phrases like "click here" and "more" must be avoided.

6. Caption and/or provide transcripts for media

Videos and live audio must have captions and a transcript. With archived audio, a transcription may be sufficient.

7. Ensure accessibility of non-HTML content, including PDF files, Microsoft Word documents, PowerPoint presentations and Adobe Flash content.

In addition to all of the other principles listed here, PDF documents and other non-HTML content must be as accessible as possible. If you cannot make it accessible, consider using HTML instead or, at the very least, provide an accessible alternative. PDF documents should also include a series of tags to make it more accessible. A tagged PDF file looks the same, but it is almost always more accessible to a person using a screen reader.

8. Allow users to skip repetitive elements on the page

You should provide a method that allows users to skip navigation or other elements that repeat on every page. This is usually accomplished by providing a "Skip to Main Content," or "Skip Navigation" link at the top of the page which jumps to the main content of the page.

9. Do not rely on color alone to convey meaning

The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.

10. Make sure content is clearly written and easy to read

There are many ways to make your content easier to understand. Write clearly, use clear fonts, and use headings and lists appropriately.

11. Make JavaScript accessible

Ensure that JavaScript event handlers are device independent (e.g., they do not require the use of a mouse) and make sure that your page does not rely on JavaScript to function.

12. Design to standards

HTML compliant and accessible pages are more robust and provide better search engine optimization. Cascading Style Sheets (CSS) allow you to separate content from presentation. This provides more flexibility and accessibility of your content.

 


Articles