Upload Image to Check for Web Accessibility
A few weeks agone I published an article highlighting popular tools and other considerations to check your site's accessibility. There I briefly touched on the possible errors these tools wait for in your code and how to avoid them. In this post, I will talk almost guidelines for making a website accessible by adhering to WCAG ii.0 (Spider web Content Accessibility Guidelines).
In order to get a clear agreement of the dissimilar kinds of accessibility issues and how users take advantage of assistive technologies to overcome them, you lot may desire to read through the essential components of spider web accessibility before nosotros proceed.
Page Title
The folio championship is the text included in the title tag. It is shown in the title bar of some browsers, and appears in search results and bookmarks every bit a folio's heading. Information technology is also read by screen readers when a page is loaded. Although a not-screen reader user can avoid reading an inappropriate title, a screen reader will e'er read information technology out. Therefore, the title should be chosen with care.
SitePoint'due south home page with its championship displayed in a tool tip.
Guidelines for Page Titles
- Make certain the championship adequately describes the nature of the page and is of an appropriate length.
- Two pages on 1 website should non share the aforementioned championship.
- A screen reader volition read out the title every fourth dimension information technology changes, then don't modify the page title except in rare cases (for case, in a chat application).
Images
Images are of practically no use to blind users. It is of import to provide associated alt text with the image that appropriately describes the image. The alt text must not describe the image but merely it should also provide the aforementioned user experience. For case, alt text for an image of the "world" icon, used for notifications on Facebook, should read "notifications" rather than "world" or "planet earth".
The alt text for an prototype is read out by screen readers, so images used for decorative purposes should nigh always be include equally backrounds in CSS or else have a nix or empty value for their alt attribute, which will instruct the screen reader to ignore the paradigm.
You might wonder: Why non merely exclude the alt aspect altogether, rather than include an empty value? This is considering if the alt text is absent-minded, a screen reader reads out the src attribute instead – the path to the image! Naturally, you don't want this, then it's best to include decorative images via CSS or else include the alt attribute, but go out it empty.
The alt attribute has another use. If the user has switched images off in gild to save bandwidth, the alt text is generally displayed in place of your disabled image. This way you'll know what the image is for without downloading information technology.
Guidelines for Accessible Images
- Equally mentioned above, the alt text must explain the prototype's purpose, rather than just describing the image.
- Make sure yous include whatever text that is a part of the epitome in the alt text.
- Provide a null or empty alt attribute for images that convey no useful meaning, similar those used for decorative purposes.
- If an prototype is complex, like a graph, the description should be what the paradigm is about and the data in the prototype should be presented elsewhere on the page.
- The alt text should be precise and should never contain superfluous words like "Paradigm of" or "Link to".
How to Check Image alt Text
An piece of cake mode is to check the alt text for many different images is to use the Spider web Accessibility Evaluation Tool (WAVE), which lists the alt text of every image in a URL and will display an mistake if images have missing alt text.
Headings
Most CSS developers understand how to utilise headings (h1, h2, and so on). Early on in the CSS movement, however, many pages looked like this:
<div class = "heading" > HTML </div > <div class = "text" > <p > HTML is the language of the web. </p > <div grade = "subheading" > br tag </div > <p > br is used to insert line breaks. </p > <div class = "subheading" > p tag </div > <p > p is used to create paragraphs. </p > </div > <div class = "heading" > CSS </div > <div course = "text" > <p > CSS is used for styling </p > </div > As yous can see, no headings are used but instead the elements are styled using various classes. A much more accessible way to represent this is with headings:
<h2 > HTML </h2 > <p > HTML is the language of the web. </p > <h3 > br tag </h3 > <p > br is used to insert line breaks. </p > <h3 > p tag </h3 > <p > p is used to create paragraphs. </p > <h2 > CSS </h2 > <p > CSS is used for styling. </p > A proper heading structure must be maintained and styling should be applied to the HTML elements. Fortunately, most developers today have practiced habits and exercise this quite well for the nigh part.
Guidelines for Headings
- All pages must accept use at least one heading.
- Text that serves the purpose of headings or subheadings must be wrapped with proper heading markup.
- A proper bureaucracy of headings must be maintained.
How to Bank check Heading Accessibility
Although checks without a tool are possible by comparing markup to the visual structure of the page, it'south generally advisable to use a tool like WAVE or the W3 HTML Validator.
Color Contrast
As the color contrast between the background and foreground decreases, it becomes hard to distinguish what is being presented – be information technology text or images. Information technology likewise becomes difficult for people with color blindness to read depression contrast text, because the colors appear as dissimilar shades of grey (depending on the severity of their disability).
It is said that 1 in twelve people accept some sort of colour deficiency. This means that a huge number of people are not able to meet your website the way y'all do.
Guidelines for Colour Contrast
- While designing your website, brand sure your colour contrast is high in order to maximise readability.
- Avert using background images that have a wide range of colors.
How to test colour contrast
- Apply a browser addition like Grayscale Tool for Chrome, to see what a web page looks like in greyscale.
- Use a color contrast checker tool similar Bank check My Colors (which checks your whole page for low contrast) or Contrast Ratio (which gives you a WCAG score after inputting the text and background colors y'all intend to use).
checkmycolours.com Contrast testing tool.
Lea Verou's dissimilarity testing tool.
Keyboard Admission
People who are unable to employ a mouse with precision rely exclusively on the keyboard for navigation of websites. For such users, the website must be navigable using only the keyboard, and keyboard focus on certain elements must exist visible.
Guidelines for Keyboard Accessibility
- Every element should be accessible through the keyboard: links, buttons, form fields, and controls for WYSIWYG editors or media players.
- In driblet-down menus, ensure that every item is keyboard-attainable using the tab or pointer keys.
- Ensure that the user can tab out of elements that they tabbed into, and not go stuck on one.
- Check the shifts of focus in reading lodge as you tab through the content — from height-to-lesser and left-to-correct (opposite for correct-to-left languages like Standard arabic).
- Visual focus shouldn't be lost.
How to Check for Keyboard Admission
- Click on the address bar using your mouse and do not use the mouse again. Instead, employ the tab cardinal to movement through elements, and employ SHIFT+Tab to move backwards.
- In drop-down menus or other elements, you may demand to use the arrow keys in identify of the tab key to navigate.
- Make certain you don't lose visual focus when tabbing through the data.
Using BAD
The Earlier After Sit-in (BAD) is a demo created by W3C that shows an inaccessible website, explaining the issues with it and the same website afterwards following the general accessibility guidelines.
W3.org's Before and After Sit-in.
You can compare the pages within the demo to proceeds a improve agreement of spider web accessibility.
Determination
With knowledge of web accessibility checks, you should contact website owners and/or the developers about your findings and encourage them to fix their errors. However, y'all should also consider a proper way of approaching them.
We take covered a few topics pertaining to checking the accessibility of a website, only there are many other checks that we haven't discussed. The complete list of easy checks for web accessibility tin be found on W3C's initial review of web accessibility.
And it should be noted that accessibility is always an ongoing task. Fifty-fifty if a website passes all website accessibility checks, there may yet be areas that are hard to access via the keyboard or using a screen reader or other assistive device. Zippo beats actual testing, so go on to exam fifty-fifty later all technical tests have been passed.
Source: https://www.sitepoint.com/easy-checks-website-accessibility/
0 Response to "Upload Image to Check for Web Accessibility"
Post a Comment