|
|
@@ -3,42 +3,42 @@
|
|
|
<Accessibility />
|
|
|
<main class="aria-control-target">
|
|
|
<nav>
|
|
|
- <h1>Catalogue</h1>
|
|
|
+ <h1 tabindex="0">Catalogue</h1>
|
|
|
<section class="overview-wrapper">
|
|
|
- <h2><a href="#Overview">Overview</a></h2>
|
|
|
+ <h2><a tabindex="0" href="#Overview">Overview</a></h2>
|
|
|
<section class="overview-list">
|
|
|
<h3>
|
|
|
- <a href="#What is the definition of website content accessibility?">
|
|
|
+ <a tabindex="0" href="#What is the definition of website content accessibility?">
|
|
|
What is the definition of website content accessibility?
|
|
|
</a>
|
|
|
</h3>
|
|
|
<h3>
|
|
|
- <a href="#What website accessibility features does this website provide?">
|
|
|
+ <a tabindex="0" href="#What website accessibility features does this website provide?">
|
|
|
What website accessibility features does this website provide?
|
|
|
</a>
|
|
|
</h3>
|
|
|
<h3>
|
|
|
- <a href="#What is included in the navigational functionality feature?">
|
|
|
+ <a tabindex="0" href="#What is included in the navigational functionality feature?">
|
|
|
What is included in the navigational functionality feature?
|
|
|
</a>
|
|
|
</h3>
|
|
|
<h3>
|
|
|
- <a href="#What is included in the accessibility features for website browsing?">
|
|
|
+ <a tabindex="0" href="#What is included in the accessibility features for website browsing?">
|
|
|
What is included in the accessibility features for website browsing?
|
|
|
</a>
|
|
|
</h3>
|
|
|
<h3>
|
|
|
- <a href="#How to use the accessibility toolbar when browsing the website?">
|
|
|
+ <a tabindex="0" href="#How to use the accessibility toolbar when browsing the website?">
|
|
|
How to use the accessibility toolbar when browsing the website?
|
|
|
</a>
|
|
|
</h3>
|
|
|
<h3>
|
|
|
- <a href="#What is the functionality of a cross cursor?">
|
|
|
+ <a tabindex="0" href="#What is the functionality of a cross cursor?">
|
|
|
What is the functionality of a cross cursor?
|
|
|
</a>
|
|
|
</h3>
|
|
|
<h3>
|
|
|
- <a href="#How do visitors who are visually impaired or elderly browse this website?">
|
|
|
+ <a tabindex="0" href="#How do visitors who are visually impaired or elderly browse this website?">
|
|
|
How do visitors who are visually impaired or elderly browse this website?
|
|
|
</a>
|
|
|
</h3>
|
|
|
@@ -47,18 +47,18 @@
|
|
|
<div class="splitter" />
|
|
|
<section>
|
|
|
<h2>
|
|
|
- <a href="#Keyboard navigation">
|
|
|
+ <a tabindex="0" href="#Keyboard navigation">
|
|
|
Keyboard navigation
|
|
|
</a>
|
|
|
</h2>
|
|
|
<section>
|
|
|
<h3>
|
|
|
- <a href="#Accessibility (Keyboard navigation)">
|
|
|
+ <a tabindex="0" href="#Accessibility (Keyboard navigation)">
|
|
|
Accessibility (Keyboard navigation)
|
|
|
</a>
|
|
|
</h3>
|
|
|
<h3>
|
|
|
- <a href="#Web navigation (Keyboard navigation)">
|
|
|
+ <a tabindex="0" href="#Web navigation (Keyboard navigation)">
|
|
|
Web navigation (Keyboard navigation)
|
|
|
</a>
|
|
|
</h3>
|
|
|
@@ -66,82 +66,82 @@
|
|
|
</section>
|
|
|
</nav>
|
|
|
<article>
|
|
|
- <h1>Accessibility Guidelines</h1>
|
|
|
+ <h1 tabindex="0">Accessibility Guidelines</h1>
|
|
|
<div class="splitter" />
|
|
|
<section>
|
|
|
- <h2 id="Overview">
|
|
|
+ <h2 tabindex="0" id="Overview">
|
|
|
Overview
|
|
|
</h2>
|
|
|
<section>
|
|
|
- <h3 id="What is the definition of website content accessibility?">
|
|
|
+ <h3 tabindex="0" id="What is the definition of website content accessibility?">
|
|
|
What is the definition of website content accessibility?
|
|
|
</h3>
|
|
|
- <p>The term "website content accessibility" refers to no matter whether the non-disabled or the disabled, youth or elder can benefit from information technology, anyone can obtain and use website content in an equal, convenient, and barrier-free manner under any circumstances.</p>
|
|
|
+ <p tabindex="0">The term "website content accessibility" refers to no matter whether the non-disabled or the disabled, youth or elder can benefit from information technology, anyone can obtain and use website content in an equal, convenient, and barrier-free manner under any circumstances.</p>
|
|
|
</section>
|
|
|
<section>
|
|
|
- <h3 id="What website accessibility features does this website provide?">
|
|
|
+ <h3 tabindex="0" id="What website accessibility features does this website provide?">
|
|
|
What website accessibility features does this website provide?
|
|
|
</h3>
|
|
|
- <p>
|
|
|
+ <p tabindex="0">
|
|
|
This website mainly implements the following two accessibility features:
|
|
|
</p>
|
|
|
<ol>
|
|
|
- <li>Improves navigational functionality</li>
|
|
|
- <li>Accessibility feature for website browsing</li>
|
|
|
+ <li tabindex="0">Improves navigational functionality</li>
|
|
|
+ <li tabindex="0">Accessibility feature for website browsing</li>
|
|
|
</ol>
|
|
|
</section>
|
|
|
<section>
|
|
|
- <h3 id="What is included in the navigational functionality feature?">
|
|
|
+ <h3 tabindex="0" id="What is included in the navigational functionality feature?">
|
|
|
What is included in the navigational functionality feature?
|
|
|
</h3>
|
|
|
- <p>It fully supports mouse operation and keyboard navigation, making it easier to accommodate the usage preferences of certain groups.</p>
|
|
|
+ <p tabindex="0">It fully supports mouse operation and keyboard navigation, making it easier to accommodate the usage preferences of certain groups.</p>
|
|
|
</section>
|
|
|
<section>
|
|
|
- <h3 id="What is included in the accessibility features for website browsing?">
|
|
|
+ <h3 tabindex="0" id="What is included in the accessibility features for website browsing?">
|
|
|
What is included in the accessibility features for website browsing?
|
|
|
</h3>
|
|
|
<ol>
|
|
|
- <li>Accessibility features can be enabled or disabled for website browsing;</li>
|
|
|
- <li>Interface can be reset;</li>
|
|
|
- <li>Mouse pointer can be resized;</li>
|
|
|
- <li>Cross cursor feature is supported;</li>
|
|
|
- <li>Four types of interface colors can be altered;</li>
|
|
|
- <li>Interface can be magnified and reduced;</li>
|
|
|
- <li>Volume can be adjusted;</li>
|
|
|
- <li>Screen reader is provided;</li>
|
|
|
- <li>Textbox mode can be enabled;</li>
|
|
|
+ <li tabindex="0">Accessibility features can be enabled or disabled for website browsing;</li>
|
|
|
+ <li tabindex="0">Interface can be reset;</li>
|
|
|
+ <li tabindex="0">Mouse pointer can be resized;</li>
|
|
|
+ <li tabindex="0">Cross cursor feature is supported;</li>
|
|
|
+ <li tabindex="0">Four types of interface colors can be altered;</li>
|
|
|
+ <li tabindex="0">Interface can be magnified and reduced;</li>
|
|
|
+ <li tabindex="0">Volume can be adjusted;</li>
|
|
|
+ <li tabindex="0">Screen reader is provided;</li>
|
|
|
+ <li tabindex="0">Textbox mode can be enabled;</li>
|
|
|
</ol>
|
|
|
</section>
|
|
|
<section>
|
|
|
- <h3 id="How to use the accessibility toolbar when browsing the website?">
|
|
|
+ <h3 tabindex="0" id="How to use the accessibility toolbar when browsing the website?">
|
|
|
How to use the accessibility toolbar when browsing the website?
|
|
|
</h3>
|
|
|
- <p>
|
|
|
+ <p tabindex="0">
|
|
|
This website provides the ability to enable and disable accessibility features. There is a "caring mode" button in the accessibility toolbar at the top of the website homepage.
|
|
|
</p>
|
|
|
</section>
|
|
|
<section>
|
|
|
- <h3 id="What is the functionality of a cross cursor?">
|
|
|
+ <h3 tabindex="0" id="What is the functionality of a cross cursor?">
|
|
|
What is the functionality of a cross cursor?
|
|
|
</h3>
|
|
|
- <p>On this page, the cross cursor is represented by two red reference lines in a horizontal and vertical position, which assists visually challenged visitors in enhancing their reading experience.</p>
|
|
|
+ <p tabindex="0">On this page, the cross cursor is represented by two red reference lines in a horizontal and vertical position, which assists visually challenged visitors in enhancing their reading experience.</p>
|
|
|
</section>
|
|
|
<section>
|
|
|
- <h3 id="How do visitors who are visually impaired or elderly browse this website?">
|
|
|
+ <h3 tabindex="0" id="How do visitors who are visually impaired or elderly browse this website?">
|
|
|
How do visitors who are visually impaired or elderly browse this website?
|
|
|
</h3>
|
|
|
- <p>This website has accessibility features for visually challenged and elderly users. The accessibility toolbar enables users to select the appropriate text size and interface color to promote the browsing experience of the webpage's content. Also, the cross-cursor feature allows locating the texts both horizontally and vertically. Additionally, users can select whether to receive content on the webpage via screen reader or not based on their own needs.</p>
|
|
|
+ <p tabindex="0">This website has accessibility features for visually challenged and elderly users. The accessibility toolbar enables users to select the appropriate text size and interface color to promote the browsing experience of the webpage's content. Also, the cross-cursor feature allows locating the texts both horizontally and vertically. Additionally, users can select whether to receive content on the webpage via screen reader or not based on their own needs.</p>
|
|
|
</section>
|
|
|
</section>
|
|
|
<section>
|
|
|
- <h2 id="Keyboard navigation">
|
|
|
+ <h2 tabindex="0" id="Keyboard navigation">
|
|
|
Keyboard navigation
|
|
|
</h2>
|
|
|
<section>
|
|
|
- <h3 id="Accessibility (Keyboard navigation)">
|
|
|
+ <h3 tabindex="0" id="Accessibility (Keyboard navigation)">
|
|
|
Accessibility (Keyboard navigation)
|
|
|
</h3>
|
|
|
- <p>
|
|
|
+ <p tabindex="0">
|
|
|
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.
|
|
|
</p>
|
|
|
<table>
|
|
|
@@ -152,63 +152,63 @@
|
|
|
<col class="shortcut">
|
|
|
</colgroup>
|
|
|
<tr>
|
|
|
- <th>Help:</th>
|
|
|
- <td>(Shift + /)</td>
|
|
|
- <th>Quit:</th>
|
|
|
- <td>(Shift + Q)</td>
|
|
|
+ <th tabindex="0">Help:</th>
|
|
|
+ <td tabindex="0">(Shift + /)</td>
|
|
|
+ <th tabindex="0">Quit:</th>
|
|
|
+ <td tabindex="0">(Shift + Q)</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th>Reset:</th>
|
|
|
- <td>(Shift + 1)</td>
|
|
|
- <th>Volume:</th>
|
|
|
- <td>(Shift + 2)</td>
|
|
|
+ <th tabindex="0">Reset:</th>
|
|
|
+ <td tabindex="0">(Shift + 1)</td>
|
|
|
+ <th tabindex="0">Volume:</th>
|
|
|
+ <td tabindex="0">(Shift + 2)</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th>Speech rate:</th>
|
|
|
- <td>(Shift + 3)</td>
|
|
|
- <th>Reading method:</th>
|
|
|
- <td>(Shift + 4)</td>
|
|
|
+ <th tabindex="0">Speech rate:</th>
|
|
|
+ <td tabindex="0">(Shift + 3)</td>
|
|
|
+ <th tabindex="0">Reading method:</th>
|
|
|
+ <td tabindex="0">(Shift + 4)</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th>Color scheme:</th>
|
|
|
- <td>(Shift + 5)</td>
|
|
|
- <th>Zoom in:</th>
|
|
|
- <td>(Shift + 6)</td>
|
|
|
+ <th tabindex="0">Color scheme:</th>
|
|
|
+ <td tabindex="0">(Shift + 5)</td>
|
|
|
+ <th tabindex="0">Zoom in:</th>
|
|
|
+ <td tabindex="0">(Shift + 6)</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th>Zoom out:</th>
|
|
|
- <td>(Shift + 7)</td>
|
|
|
- <th>Cursor style:</th>
|
|
|
- <td>(Shift + 8)</td>
|
|
|
+ <th tabindex="0">Zoom out:</th>
|
|
|
+ <td tabindex="0">(Shift + 7)</td>
|
|
|
+ <th tabindex="0">Cursor style:</th>
|
|
|
+ <td tabindex="0">(Shift + 8)</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th>Cross cursor:</th>
|
|
|
- <td>(Shift + 9)</td>
|
|
|
- <th>Display mode:</th>
|
|
|
- <td>(Shift + 0)</td>
|
|
|
+ <th tabindex="0">Cross cursor:</th>
|
|
|
+ <td tabindex="0">(Shift + 9)</td>
|
|
|
+ <th tabindex="0">Display mode:</th>
|
|
|
+ <td tabindex="0">(Shift + 0)</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th>Shortcut:</th>
|
|
|
- <td>(Shift + D)</td>
|
|
|
- <th>Text-to-Speech:</th>
|
|
|
- <td>(Shift + N)</td>
|
|
|
+ <th tabindex="0">Shortcut:</th>
|
|
|
+ <td tabindex="0">(Shift + D)</td>
|
|
|
+ <th tabindex="0">Text-to-Speech:</th>
|
|
|
+ <td tabindex="0">(Shift + N)</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th>Navigation:</th>
|
|
|
- <td>(Alt + 1)</td>
|
|
|
- <th>Viewport:</th>
|
|
|
- <td>(Alt + 2)</td>
|
|
|
+ <th tabindex="0">Navigation:</th>
|
|
|
+ <td tabindex="0">(Alt + 1)</td>
|
|
|
+ <th tabindex="0">Viewport:</th>
|
|
|
+ <td tabindex="0">(Alt + 2)</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th>Interactive port:</th>
|
|
|
- <td>(Alt + 3)</td>
|
|
|
- <th />
|
|
|
- <td />
|
|
|
+ <th tabindex="0">Interactive port:</th>
|
|
|
+ <td tabindex="0">(Alt + 3)</td>
|
|
|
+ <th tabindex="0" />
|
|
|
+ <td tabindex="0" />
|
|
|
</tr>
|
|
|
</table>
|
|
|
</section>
|
|
|
<section>
|
|
|
- <h3 id="Web navigation (Keyboard navigation)">
|
|
|
+ <h3 tabindex="0" id="Web navigation (Keyboard navigation)">
|
|
|
Web navigation (Keyboard navigation)
|
|
|
</h3>
|
|
|
<table>
|
|
|
@@ -219,16 +219,16 @@
|
|
|
<col class="shortcut">
|
|
|
</colgroup>
|
|
|
<tr>
|
|
|
- <th>Browsing:</th>
|
|
|
- <td>(Tab)</td>
|
|
|
- <th>Reverse:</th>
|
|
|
- <td>(Shift + Tab)</td>
|
|
|
+ <th tabindex="0">Browsing:</th>
|
|
|
+ <td tabindex="0">(Tab)</td>
|
|
|
+ <th tabindex="0">Reverse:</th>
|
|
|
+ <td tabindex="0">(Shift + Tab)</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
- <th>Open the link:</th>
|
|
|
- <td>(Enter)</td>
|
|
|
- <th />
|
|
|
- <td />
|
|
|
+ <th tabindex="0">Open the link:</th>
|
|
|
+ <td tabindex="0">(Enter)</td>
|
|
|
+ <th tabindex="0" />
|
|
|
+ <td tabindex="0" />
|
|
|
</tr>
|
|
|
</table>
|
|
|
</section>
|
任一存