depictedminds
New member
Introduction:
We all love websites that look fantastic. But ask yourself this - Are you thinking about accessibility?
What is "Accessibility"
Accessibility means "able to be accessed equally by the largest range of people possible". That means if a website is being designed, it should be made accessible to the largest range of people possible. To put it another way, a website should not EXCLUDE anyone from using the website.
Major Examples of Accessibility Neglect
Vision Imparement Accessibility:
Many website developers (or designers for that matter) are often caught up in the design of a website's visual and technological aspects, they sometimes forget that a segment of the users of the internet have visual imparements. In many cases, the visual elements of a website are so intricate and detailed, it takes a certain level of visual perception to be able to navigate a website.
Visual Disabilities that typically effect how websites are used are categorised as:
Color Blindness: The manner in which you percieve your website colors may be very different to how an individual with colorblindness may view websites.
Protanopia and protanomaly (Red Vision Deficiancy) - These users typically have a difficulty distinguishing the difference between the colors Red and Green. As many of us already know, these colors are often used as "Yes/No" indicators, or "True/False" Indicators - if these are used on the webpage you create, care should be taken to ensure these indicators are HIGHLY VISIBLE for an individual who may not be able to distinguish differences between the two colors.
Deuteranopia and deuteranomaly (Green Vision Deficiancy) - Typically less severe than Protonopia, these users are usually able to determine differences in the colors red and green, as they can often determine the differences in the shades relatively accurately. However it is still important to ensure that elements of a design that are considered informative or important are still HIGHLY VISIBLE for an individual to read.
Tritanopia (Blue Deficiancy) - Users with Tritanopia typically have a visual experience that, to people with normal vision, would look saturated in red. A representation of how images may look to a person with "normal" vision, and an individual with the above conditions can be located HERE. You will notice that, particularly the image with the hats, a green and an orange look almost identical.
The Key Accessibility principle for individuals with Color Blindness is "Perceivable" - because the individuals have difficulty with the perception of difference colors. It is for this very reason that your design should ALWAYS consider individuals with color blindness, and ensure elements of the design are easily distinguishable, that elements of the website are reasonably "Contrasted", to ensure the greatest range of visibility.
Low Vision: Low vision users often have difficulty seeing levels of detail in certain "areas" of "visual real-estate", such as a face in a photo, or the edges of an item if focus is in the centre of the item.
Low vision impairments include:
Macular Degeneration : To experience Macular Degeneration yourself, take both of your thumbs and place them just in front of your eyes - ensure you are still able to see "through" them if you focus into the distance at an object. Now try and read something in your peripheral vision, without taking your eyes off your thumbs. Macular degeneration is caused by the degeneration of tissue of the Macular, the rear portion of the eye. It can also be caused by leaking blood vessels in the macular, known as "wet macular degeneration" - both conditions result in a blurred or removed vision typically in the centre of the peripheral vision area. Ultimately, making it difficult for an individual to focus on elements directly.
Glaucoma : Effectively the reverse of Macular Degeneration, from a perception standpoint. The area around the edges of a object or image if focused directly tend to lose focus and fade away. To experience this effect yourself, try reading this article through a straw. This is caused by an increase in pressure of the eye, which causes damage to the optic nerve.
Diabetic Retinopathy: Similarly caused by leaking vessels inside the eye (but not necessarily the macular), an individual with Diabetic Retinopathy will see spots, distortions with spots, or speckled blurryness. To see an example of this, imagine splashing the screen of your phone with colored black water - you can see through some of the water, however the image is distorted, blurry, etc.
Cataract: Individuals with cataract conditions typically have difficulty seeing high levels of detail in pictures or images, due to their peripheral vision being completely blurred. Most individuals with cataract conditions from a young age have learned to compensate for this visual imparement in most cases, however still find it difficult to identify explicit levels of detail in the same manner as an individual with "normal vision".
The Key Accessibility principle for individuals with Low Vision is also "Perceivable" - because the individuals have difficulty with fine levels of detail, the ability to focus at specific objects (particuarly if they are moving). It is for this very reason that your design should ALWAYS consider elements with detail (particularly TYPOGRAPHY), and ensure elements of the design are easily distinguishable, readable, and do not RELY on an individual being able to percieve high levels of image detail.
Blindness (complete): Possibly the largest Accessibility concern for web developers, this refers to individuals with a level of visual perception that is zero, or effectively zero. Users with Blindness typically require assistive technologies to read the content of a website, and therefore a website should cater for the use of assistive technologies.
The key Accessibility principles for individuals with blindness are "Percieveable" because they cannot see the webpage, "Operable" because their ability to operate a webpage relies on different input methods, or viewing methods to use the webpage (such as a keyboard instead of a mouse), "Understandable" because an individuall using an assistive technnology cannot understand content on the website that is not created in a logical order, or requires some form of interractivity to "track" information, and "Robust" because content on the webpage relies on it being compatible with various assistant technologies.
Suggested best practice
Web pages should not utilise javascript or other multimedia plugins to "hide" content until an interraction occurs, because an individual with an assistive technology will not see the content to interract with it (unless said content is PURELY COSMETIC).
Web pages should not require a user to "chase" objects around the screen, or track an object to "click on". In the event a multimedia element has this sort of interraction, an alternative method to obtain information should be made available, such as a text-only version of the website, or a low-bandwidth HTML only version of the website.
Effects that are purely cosmetic typically are accepted as long as the user is not expected to interract with an element BASED ON the cosmetic changes.
Another important element to avoid where possible is the use of "onclick" events - especially navigational onclick events. These events do not appear as hyperlinks for users with assistive technology, therefore navigation to a page that requires an on-click event is not always possible.
Frames should be avoided. A Frame is a series of webpages held together by a master page. Most assistive technologies display single pages at a time (specifically text-only readers) and using a frameset for what might seem to be an intended purpose (such as layout) is not possible for users with assistive technologies.
Tables should not be used for layouts at any time. Tables are designed for DATA, and screen readers treat data in tables as they would expect data to be displayed - which may not necessarily be the way a table is displaying a page if used for layout. CSS layouts are either ignored by a screen reader, or they have the ability to cater for CSS due to standards - therefore CSS positioning should be favored at all times over table usage.
Images should always include an "ALT" tag. Users with assistive technology cannot see the images on the screen. Therefore, an alt tag can be used to describe the image, and the end user can then determine how it relates to their visit to the website. Images should not be used as navigational links WITHOUT an alt tag.
Font sizes should be set in "EM" measurements, rather than pixel measurements - this allows fonts to be defined based on a ratio of standard font sizes, allowing for users to scale fonts consistantly. This in turn may break the layout of a page, so thought should be considered when creating text on a page, and where the text is located, and how much space is allocated to text. Most modern browsers now magnify the webpages, rather than simply scale the fonts, so this has become less of a problem for website layouts these days.
This is just a brief explanation of the VISUAL element of Accessibility. For more information on this aspect, I encourage all web designers to visit http://www.webaim.org to learn more about how we can produce better webpages that do not EXCLUDE individuals.
In my next accessibility post, I will talk about Motor and Cognative Accessibility awareness.
We all love websites that look fantastic. But ask yourself this - Are you thinking about accessibility?
What is "Accessibility"
Accessibility means "able to be accessed equally by the largest range of people possible". That means if a website is being designed, it should be made accessible to the largest range of people possible. To put it another way, a website should not EXCLUDE anyone from using the website.
Major Examples of Accessibility Neglect
Vision Imparement Accessibility:
Many website developers (or designers for that matter) are often caught up in the design of a website's visual and technological aspects, they sometimes forget that a segment of the users of the internet have visual imparements. In many cases, the visual elements of a website are so intricate and detailed, it takes a certain level of visual perception to be able to navigate a website.
Visual Disabilities that typically effect how websites are used are categorised as:
- Color Blindness
- Low-Vision
- Blindness (complete)
Color Blindness: The manner in which you percieve your website colors may be very different to how an individual with colorblindness may view websites.
Protanopia and protanomaly (Red Vision Deficiancy) - These users typically have a difficulty distinguishing the difference between the colors Red and Green. As many of us already know, these colors are often used as "Yes/No" indicators, or "True/False" Indicators - if these are used on the webpage you create, care should be taken to ensure these indicators are HIGHLY VISIBLE for an individual who may not be able to distinguish differences between the two colors.
Deuteranopia and deuteranomaly (Green Vision Deficiancy) - Typically less severe than Protonopia, these users are usually able to determine differences in the colors red and green, as they can often determine the differences in the shades relatively accurately. However it is still important to ensure that elements of a design that are considered informative or important are still HIGHLY VISIBLE for an individual to read.
Tritanopia (Blue Deficiancy) - Users with Tritanopia typically have a visual experience that, to people with normal vision, would look saturated in red. A representation of how images may look to a person with "normal" vision, and an individual with the above conditions can be located HERE. You will notice that, particularly the image with the hats, a green and an orange look almost identical.
The Key Accessibility principle for individuals with Color Blindness is "Perceivable" - because the individuals have difficulty with the perception of difference colors. It is for this very reason that your design should ALWAYS consider individuals with color blindness, and ensure elements of the design are easily distinguishable, that elements of the website are reasonably "Contrasted", to ensure the greatest range of visibility.
Low Vision: Low vision users often have difficulty seeing levels of detail in certain "areas" of "visual real-estate", such as a face in a photo, or the edges of an item if focus is in the centre of the item.
Low vision impairments include:
- Macular Degeneration
- Glaucoma
- Diabetic Retinopathy
- Cataract
Macular Degeneration : To experience Macular Degeneration yourself, take both of your thumbs and place them just in front of your eyes - ensure you are still able to see "through" them if you focus into the distance at an object. Now try and read something in your peripheral vision, without taking your eyes off your thumbs. Macular degeneration is caused by the degeneration of tissue of the Macular, the rear portion of the eye. It can also be caused by leaking blood vessels in the macular, known as "wet macular degeneration" - both conditions result in a blurred or removed vision typically in the centre of the peripheral vision area. Ultimately, making it difficult for an individual to focus on elements directly.
Glaucoma : Effectively the reverse of Macular Degeneration, from a perception standpoint. The area around the edges of a object or image if focused directly tend to lose focus and fade away. To experience this effect yourself, try reading this article through a straw. This is caused by an increase in pressure of the eye, which causes damage to the optic nerve.
Diabetic Retinopathy: Similarly caused by leaking vessels inside the eye (but not necessarily the macular), an individual with Diabetic Retinopathy will see spots, distortions with spots, or speckled blurryness. To see an example of this, imagine splashing the screen of your phone with colored black water - you can see through some of the water, however the image is distorted, blurry, etc.
Cataract: Individuals with cataract conditions typically have difficulty seeing high levels of detail in pictures or images, due to their peripheral vision being completely blurred. Most individuals with cataract conditions from a young age have learned to compensate for this visual imparement in most cases, however still find it difficult to identify explicit levels of detail in the same manner as an individual with "normal vision".
The Key Accessibility principle for individuals with Low Vision is also "Perceivable" - because the individuals have difficulty with fine levels of detail, the ability to focus at specific objects (particuarly if they are moving). It is for this very reason that your design should ALWAYS consider elements with detail (particularly TYPOGRAPHY), and ensure elements of the design are easily distinguishable, readable, and do not RELY on an individual being able to percieve high levels of image detail.
Blindness (complete): Possibly the largest Accessibility concern for web developers, this refers to individuals with a level of visual perception that is zero, or effectively zero. Users with Blindness typically require assistive technologies to read the content of a website, and therefore a website should cater for the use of assistive technologies.
The key Accessibility principles for individuals with blindness are "Percieveable" because they cannot see the webpage, "Operable" because their ability to operate a webpage relies on different input methods, or viewing methods to use the webpage (such as a keyboard instead of a mouse), "Understandable" because an individuall using an assistive technnology cannot understand content on the website that is not created in a logical order, or requires some form of interractivity to "track" information, and "Robust" because content on the webpage relies on it being compatible with various assistant technologies.
Suggested best practice
Web pages should not utilise javascript or other multimedia plugins to "hide" content until an interraction occurs, because an individual with an assistive technology will not see the content to interract with it (unless said content is PURELY COSMETIC).
Web pages should not require a user to "chase" objects around the screen, or track an object to "click on". In the event a multimedia element has this sort of interraction, an alternative method to obtain information should be made available, such as a text-only version of the website, or a low-bandwidth HTML only version of the website.
Effects that are purely cosmetic typically are accepted as long as the user is not expected to interract with an element BASED ON the cosmetic changes.
Another important element to avoid where possible is the use of "onclick" events - especially navigational onclick events. These events do not appear as hyperlinks for users with assistive technology, therefore navigation to a page that requires an on-click event is not always possible.
Frames should be avoided. A Frame is a series of webpages held together by a master page. Most assistive technologies display single pages at a time (specifically text-only readers) and using a frameset for what might seem to be an intended purpose (such as layout) is not possible for users with assistive technologies.
Tables should not be used for layouts at any time. Tables are designed for DATA, and screen readers treat data in tables as they would expect data to be displayed - which may not necessarily be the way a table is displaying a page if used for layout. CSS layouts are either ignored by a screen reader, or they have the ability to cater for CSS due to standards - therefore CSS positioning should be favored at all times over table usage.
Images should always include an "ALT" tag. Users with assistive technology cannot see the images on the screen. Therefore, an alt tag can be used to describe the image, and the end user can then determine how it relates to their visit to the website. Images should not be used as navigational links WITHOUT an alt tag.
Font sizes should be set in "EM" measurements, rather than pixel measurements - this allows fonts to be defined based on a ratio of standard font sizes, allowing for users to scale fonts consistantly. This in turn may break the layout of a page, so thought should be considered when creating text on a page, and where the text is located, and how much space is allocated to text. Most modern browsers now magnify the webpages, rather than simply scale the fonts, so this has become less of a problem for website layouts these days.
This is just a brief explanation of the VISUAL element of Accessibility. For more information on this aspect, I encourage all web designers to visit http://www.webaim.org to learn more about how we can produce better webpages that do not EXCLUDE individuals.
In my next accessibility post, I will talk about Motor and Cognative Accessibility awareness.
Last edited:
