(→WordPress and Accessibility) |
(→General) |
||
| (8 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| + | {{Languages| |
||
| + | {{ja|Accessibility}} |
||
| + | }} |
||
| + | |||
__TOC__ |
__TOC__ |
||
| − | Accessibility in web design means creating web pages that |
+ | Accessibility in web design means creating web pages that everyone can use, regardless of hardware, software, or any sensory or physical impairment. |
| − | |||
| − | ==Accessibility Statement== |
||
| − | |||
| − | <blockquote>"Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible.” [http://www.icdri.org/CynthiaW/cynthia_d.htm Cynthia Waddell]</blockquote> |
||
| − | |||
| − | WordPress is founded on the principles of an inclusive community and democratization of publishing. The development of WordPress, based on standards and best practices, offers a constantly improving environment with flexibility and choice. We promise to always work toward creating an environment accessible to as many people as possible, inclusive of technology and ability. |
||
| − | |||
| − | We want community involvement and welcome feedback. Your comments help us enhance the accessibility of WordPress. |
||
| − | |||
| − | ==WordPress and Accessibility== |
||
| − | |||
| − | WordPress - with a [http://wordpress.org/extend/themes/ high quality theme] - works right out of the box to help you keep your site accessible. A great deal of the work is done for you but you still have to take the time and patience to maintain those accessibility standards when creating your content. |
||
| − | |||
| − | ==Use Headings Correctly== |
||
| − | Headings are more than just big, bold, text. They help to break your pages down into logical sub-sections which, in turn, makes your pages easier to read and understand. However, they will only work effectively if you use them properly. |
||
| − | |||
| − | [[Image:heading-outline.png|left|thumbnail|Document heading outline]] Headings are defined with the <tt>h1</tt> to <tt>h6</tt> tags. <tt>h1</tt> defines the most important heading with <tt>h2</tt> defining the most important sub-heading etc. Right down to <tt>h6</tt> which defines the least important heading. You should use them logically as if you were writing an essay and '''not''' to highlight text in your page. |
||
| − | |||
| − | Heading structure also plays an important part of [[Search_Engine_Optimization_for_WordPress|search engine optimization]]. Search engine spiders check for heading tags as they index your pages, so your heading structure (and the content beneath each heading) may affect your search engine ranking. |
||
| − | |||
| − | ===Testing Headings=== |
||
| − | Read just the headings of your pages out loud. Do they describe the content that they precede? Do they break the page down logically? If you were back in school, what would your English teacher think of the page? ;-) |
||
| − | |||
| − | ==Describe Images== |
||
| − | In the simplest of examples, web users who have a visual impairment may use software that "speaks" page content to them. In this situation, they rely upon your help to "hear" your content - including any informative images. Therefore, when you include a graphic or photograph, it may be appropriate to provide an alternative description in the <tt>alt</tt> part of the <img> tag. This description will be used in place of the image. |
||
| − | |||
| − | <pre>...and the most wonderful thing appeared: <img scr="ball.jpg" alt="a beautiful red and blue ball" />.</pre> |
||
| − | |||
| − | Those who rely on screen reading software might hear, "and the most wonderful thing appeared: image - a beautiful red and blue ball." |
||
| − | |||
| − | In some cases the image is purely decorative. In these cases an alternative description is not necessary. You should always include the alt attribute, but in these cases, you can simply leave it empty. |
||
| − | |||
| − | <pre>...and the ball bounced higher and higher |
||
| − | as <img scr="ball.jpg" alt="" /> the child bounced it....</pre> |
||
| − | |||
| − | Those who rely on screen readers might hear, "and the ball bounced higher and higher as the child bounced it." |
||
| − | |||
| − | Some people use the <tt>alt</tt> attribute to add keywords to their pages in the belief that this will improve their search engine ranking. That is not the primary purpose of the attribute and, in reality, it offers little or no real [[Search_Engine_Optimization_for_WordPress|SEO]] benefits. But using the <tt>alt</tt> (or the <tt>title</tt>) attribute in this way will create significant problems for users who actually rely upon them. |
||
| − | |||
| − | ===Testing Images=== |
||
| − | To test whether your images are informative or purely decorative, imagine reading the page out to someone over the phone. Did you stop to describe an image? If "yes", then this image needs an alternative description. If "no", then the image can be used with a null (<tt>alt=""</tt>) attribute. |
||
| − | |||
| − | ==Describe Links== |
||
| − | |||
| − | Link text should describe the resource that it links to - even when the text is read out of context. Some assistive software scans a page for links and presents them to the user as a simple list. In these situations, all the links will be read out of context. So it is important the text used in a link is descriptive. |
||
| − | |||
| − | ===Bad Example=== |
||
| − | <tt>To read more client success stories, <a href="http://example.com/client-stories/">click here</a></tt><br /> |
||
| − | The phrase "click here" will not make any sense when read out of context. |
||
| − | |||
| − | ===Good Example=== |
||
| − | <tt>Read <a href="http://example.com/client-stories/">more client success stories</a></tt><br /> |
||
| − | The phrase "more client success stories" is understandable - even when read by itself. |
||
| − | |||
| − | This is one accessible design technique that will improve your [[Search_Engine_Optimization_for_WordPress|SEO]]. Google pays close attention to the text that you use for links. |
||
| − | |||
| − | ===Testing Links=== |
||
| − | To test whether you have good link texts, imagine reading just the text from all links in your page content to someone over a phone. Do they still make sense? |
||
| − | |||
| − | ==Create a Readable Page== |
||
| + | * Those who cannot see or use a mouse. |
||
| − | Sometimes, the simplest thing you can do is to create a more readable page. Reading from a screen is much harder than reading a printed page. Crowded text, lots of images, a jumble of font styles, and too much information makes a page very difficult to read. |
||
| + | * Deaf users whose first language is sign language. |
||
| + | * Visitors whose primary language is not your language. |
||
| + | * People who use special assistive software or hardware to access the Web. |
||
| + | * People who are colour blind or can’t see low colour contrast. |
||
| + | These people need access to web pages, and as a web developer, you need to know about accessibility. |
||
| − | While developing your WordPress site, take extra time to pay attention to the white space or "empty" space around the different elements on the page. Make sure the fonts are large enough to be readable. Position navigation elements in logical places. |
||
| + | ==Do you want to know more about accessibility?== |
||
| − | Also bear in mind that some your visitors may have dyslexia or may not use the same first language as you do. Keep sentences short and simple. Try to avoid abbreviations unless you explain them first. |
||
| + | The [https://make.wordpress.org/accessibility/handbook/ Handbook on WordPress Accessibility] is in the making, so here is some information to get you started. |
||
| − | ===Testing Readability=== |
||
| − | Is your page still readable when you increase the text size using the browser's zoom functionality? Do any of the non-text elements on the page create a distraction? If there are any animations or other movement on the page, consider removing these elements. |
||
| + | ===Are you a theme or plugin developer?=== |
||
| − | See the [[#Testing_Readability|Testing Readability Resources]] for a list of online testing tools. |
||
| + | Read the [https://make.wordpress.org/themes/handbook/guidelines/accessibility/ Theme Handbook on Accessibility Guidelines] and learn about controls, forms, heading structure, use of colour, skip links and use of media. |
||
| + | On the Make WordPress Accessible site you can find a list of [https://make.wordpress.org/accessibility/useful-tools/ Useful tools for accessibility testing]. |
||
| − | ==Use Color Wisely== |
||
| + | ===Are you a content manager?=== |
||
| − | Color choices also affect people's ability to "see" a page. Approximately 10% of all internet users have problems seeing colors, especially those suffering from color blindness. Visitors with a visual impairment may prefer higher contrast pages whilst those with reading difficulties may need a lower contrast. Try to strike a reasonable balance and avoid extremes. |
||
| + | ====Create a Readable Page==== |
||
| − | You don't have to design your site around these issues, but being better informed makes for a more accessible site. |
||
| + | Sometimes, the simplest thing you can do is to create a more readable page. Reading from a screen is much harder than reading a printed page. Crowded text, lots of images, a jumble of font styles, and too much information makes a page very difficult to read. |
||
| + | While developing your WordPress site, take extra time to pay attention to the white space or "empty" space around the different elements on the page. Make sure the fonts are large enough to be readable. Position navigation elements in logical and consistent places. |
||
| − | ===Testing Color Choices=== |
||
| − | If you find that your eyes are becoming tired when reading your own pages, consider lowering the text:background contrast. If you have to squint or strain to read text, increase the text:background contrast slightly. |
||
| + | Also bear in mind that some your visitors may have dyslexia or may not use the same first language as you do. Keep sentences short and simple. Try to avoid abbreviations unless you explain them first. |
||
| − | See the [[#Testing_Color| Testing Color Resources section]] for some free color testing tools. |
||
| + | ====Testing Readability==== |
||
| − | ==Validate!== |
||
| + | Is your page still readable when you increase the text size using the browser's text zoom options? Do any of the non-text elements on the page create a distraction? |
||
| + | If there are animations or movement on the page, consider stopping these elements' movement. Distractions from animation can be a serious issues for many visitors. |
||
| − | It's nice when you design your website to work in Firefox, but when viewed with Internet Explorer or Safari, things may look different. Page content may be scrambled, hidden or even lost. Not all browsers display all pages exactly the same way. But they can display most valid pages effectively and pleasingly. Don't aim for pixel perfection. Instead aim for "looking good" in each of your test browsers. |
||
| + | ==Join the Make WordPress Accessible team== |
||
| − | Check your website's code through [[Validating a Website|validation tests]]. Validation represents the best way of ensuring that your pages are displayed to their best advantage across a whole range of web software. |
||
| + | On [https://make.wordpress.org/accessibility/ Make WordPress Accessible] you can find information about the team and the work they do. |
||
| − | ==Make WordPress Accessible== |
||
| − | [http://make.wordpress.org/accessibility/ Make WordPress Accessible] is the official blog for the WordPress accessibility group - dedicated to improving accessibility in core WordPress and related projects. Our aim to provide accessibility suggestions, feedback and assistance to WordPress core, theme and plugin developers. |
||
| + | How you can help: |
||
| − | Anyone can join in the discussions. Just log into the blog using your WordPress.org username and password. You can also follow discussions via email or subscribe to feeds for both posts and comments. |
||
| + | * write documentation on WordPress and accessibility; |
||
| + | * test WordPress themes; |
||
| + | * report accessibility issues in core and core themes; |
||
| + | * fix accessibility issues by writing patches |
||
| + | If you want to know more, ask your questions in [https://wordpress.slack.com/messages/accessibility/ Slack] or fill out the form at the teams |
||
| − | We look forward to seeing you soon. |
||
| + | [https://make.wordpress.org/accessibility/contact-us/ contact page]. |
||
==Resources== |
==Resources== |
||
| Line 103: | Line 56: | ||
* [http://www.w3.org/WAI/WCAG20/quickref/ W3C Web Accessibility Initiative 'How To Meet WCAG2.0' Quick Reference] |
* [http://www.w3.org/WAI/WCAG20/quickref/ W3C Web Accessibility Initiative 'How To Meet WCAG2.0' Quick Reference] |
||
| − | * [http://make.wordpress.org/accessibility/ Make WordPress Accessible] |
||
| − | * [http://accessites.org/ Accessites.org (general articles on accessibility)] |
||
| − | * [http://www.accessifyforum.com/ Accessibility Forum] |
||
* [http://www.w3.org/WAI/ER/existingtools.html Evaluation, Repair, and Transformation Tools for Web Content Accessibility] |
* [http://www.w3.org/WAI/ER/existingtools.html Evaluation, Repair, and Transformation Tools for Web Content Accessibility] |
||
| + | * [http://www.paciellogroup.com/resources/ Resources of the the Paciello Group] |
||
| + | * [https://www.websitehostingrating.com/web-accessibility-resources-tools/ List of accessibility resources] |
||
| − | ===Testing Readability=== |
+ | ===Testing Readability, English only=== |
* [http://juicystudio.com/services/readability.php Juicy Studio Readability Test] |
* [http://juicystudio.com/services/readability.php Juicy Studio Readability Test] |
||
* [http://www.online-utility.org/english/readability_test_and_improve.jsp Test Document Readability] |
* [http://www.online-utility.org/english/readability_test_and_improve.jsp Test Document Readability] |
||
| + | * [http://wave.webaim.org/ WAVE accessibility testing tool] |
||
===Testing Color=== |
===Testing Color=== |
||
Languages: 日本語 (Add your language)
Accessibility in web design means creating web pages that everyone can use, regardless of hardware, software, or any sensory or physical impairment.
These people need access to web pages, and as a web developer, you need to know about accessibility.
The Handbook on WordPress Accessibility is in the making, so here is some information to get you started.
Read the Theme Handbook on Accessibility Guidelines and learn about controls, forms, heading structure, use of colour, skip links and use of media.
On the Make WordPress Accessible site you can find a list of Useful tools for accessibility testing.
Sometimes, the simplest thing you can do is to create a more readable page. Reading from a screen is much harder than reading a printed page. Crowded text, lots of images, a jumble of font styles, and too much information makes a page very difficult to read.
While developing your WordPress site, take extra time to pay attention to the white space or "empty" space around the different elements on the page. Make sure the fonts are large enough to be readable. Position navigation elements in logical and consistent places.
Also bear in mind that some your visitors may have dyslexia or may not use the same first language as you do. Keep sentences short and simple. Try to avoid abbreviations unless you explain them first.
Is your page still readable when you increase the text size using the browser's text zoom options? Do any of the non-text elements on the page create a distraction?
If there are animations or movement on the page, consider stopping these elements' movement. Distractions from animation can be a serious issues for many visitors.
On Make WordPress Accessible you can find information about the team and the work they do.
How you can help:
If you want to know more, ask your questions in Slack or fill out the form at the teams contact page.