|
|
@@ -0,0 +1,442 @@
|
|
|
+<template>
|
|
|
+ <div id="app">
|
|
|
+ <Accessibility />
|
|
|
+ <main class="aria-control-target">
|
|
|
+ <nav>
|
|
|
+ <h1>Catalogue</h1>
|
|
|
+ <section class="overview-wrapper">
|
|
|
+ <h2><a href="#Overview">Overview</a></h2>
|
|
|
+ <section class="overview-list">
|
|
|
+ <h3>
|
|
|
+ <a 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?">
|
|
|
+ What website accessibility features does this website provide?
|
|
|
+ </a>
|
|
|
+ </h3>
|
|
|
+ <h3>
|
|
|
+ <a 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?">
|
|
|
+ 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?">
|
|
|
+ How to use the accessibility toolbar when browsing the website?
|
|
|
+ </a>
|
|
|
+ </h3>
|
|
|
+ <h3>
|
|
|
+ <a 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?">
|
|
|
+ How do visitors who are visually impaired or elderly browse this website?
|
|
|
+ </a>
|
|
|
+ </h3>
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+ <div class="splitter" />
|
|
|
+ <section>
|
|
|
+ <h2>
|
|
|
+ <a href="#Keyboard navigation">
|
|
|
+ Keyboard navigation
|
|
|
+ </a>
|
|
|
+ </h2>
|
|
|
+ <section>
|
|
|
+ <h3>
|
|
|
+ <a href="#Accessibility (Keyboard navigation)">
|
|
|
+ Accessibility (Keyboard navigation)
|
|
|
+ </a>
|
|
|
+ </h3>
|
|
|
+ <h3>
|
|
|
+ <a href="#Web navigation (Keyboard navigation)">
|
|
|
+ Web navigation (Keyboard navigation)
|
|
|
+ </a>
|
|
|
+ </h3>
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+ </nav>
|
|
|
+ <article>
|
|
|
+ <h1>Accessibility Guidelines</h1>
|
|
|
+ <div class="splitter" />
|
|
|
+ <section>
|
|
|
+ <h2 id="Overview">
|
|
|
+ Overview
|
|
|
+ </h2>
|
|
|
+ <section>
|
|
|
+ <h3 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>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h3 id="What website accessibility features does this website provide?">
|
|
|
+ What website accessibility features does this website provide?
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ This website mainly implements the following two accessibility features:
|
|
|
+ </p>
|
|
|
+ <ol>
|
|
|
+ <li>Improves navigational functionality</li>
|
|
|
+ <li>Accessibility feature for website browsing</li>
|
|
|
+ </ol>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h3 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>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h3 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>
|
|
|
+ </ol>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h3 id="How to use the accessibility toolbar when browsing the website?">
|
|
|
+ How to use the accessibility toolbar when browsing the website?
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ 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?">
|
|
|
+ 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>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h3 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>
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h2 id="Keyboard navigation">
|
|
|
+ Keyboard navigation
|
|
|
+ </h2>
|
|
|
+ <section>
|
|
|
+ <h3 id="Accessibility (Keyboard navigation)">
|
|
|
+ Accessibility (Keyboard navigation)
|
|
|
+ </h3>
|
|
|
+ <p>
|
|
|
+ All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.
|
|
|
+ </p>
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col class="effect">
|
|
|
+ <col class="shortcut">
|
|
|
+ <col class="effect">
|
|
|
+ <col class="shortcut">
|
|
|
+ </colgroup>
|
|
|
+ <tr>
|
|
|
+ <th>Help:</th>
|
|
|
+ <td>(Shift + /)</td>
|
|
|
+ <th>Quit:</th>
|
|
|
+ <td>(Shift + Q)</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>Reset:</th>
|
|
|
+ <td>(Shift + 1)</td>
|
|
|
+ <th>Volume:</th>
|
|
|
+ <td>(Shift + 2)</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>Speech rate:</th>
|
|
|
+ <td>(Shift + 3)</td>
|
|
|
+ <th>Reading method:</th>
|
|
|
+ <td>(Shift + 4)</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>Color scheme:</th>
|
|
|
+ <td>(Shift + 5)</td>
|
|
|
+ <th>Zoom in:</th>
|
|
|
+ <td>(Shift + 6)</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>Zoom out:</th>
|
|
|
+ <td>(Shift + 7)</td>
|
|
|
+ <th>Cursor style:</th>
|
|
|
+ <td>(Shift + 8)</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>Cross cursor:</th>
|
|
|
+ <td>(Shift + 9)</td>
|
|
|
+ <th>Display mode:</th>
|
|
|
+ <td>(Shift + 0)</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>Shortcut:</th>
|
|
|
+ <td>(Shift + D)</td>
|
|
|
+ <th>Text-to-Speech:</th>
|
|
|
+ <td>(Shift + N)</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>Navigation:</th>
|
|
|
+ <td>(Alt + 1)</td>
|
|
|
+ <th>Viewport:</th>
|
|
|
+ <td>(Alt + 2)</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>Interactive port:</th>
|
|
|
+ <td>(Alt + 3)</td>
|
|
|
+ <th />
|
|
|
+ <td />
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </section>
|
|
|
+ <section>
|
|
|
+ <h3 id="Web navigation (Keyboard navigation)">
|
|
|
+ Web navigation (Keyboard navigation)
|
|
|
+ </h3>
|
|
|
+ <table>
|
|
|
+ <colgroup>
|
|
|
+ <col class="effect">
|
|
|
+ <col class="shortcut">
|
|
|
+ <col class="effect">
|
|
|
+ <col class="shortcut">
|
|
|
+ </colgroup>
|
|
|
+ <tr>
|
|
|
+ <th>Browsing:</th>
|
|
|
+ <td>(Tab)</td>
|
|
|
+ <th>Reverse:</th>
|
|
|
+ <td>(Shift + Tab)</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>Open the link:</th>
|
|
|
+ <td>(Enter)</td>
|
|
|
+ <th />
|
|
|
+ <td />
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </section>
|
|
|
+ </section>
|
|
|
+ </article>
|
|
|
+ </main>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Accessibility from '/src/views/accessibility.vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'App',
|
|
|
+ components: {
|
|
|
+ Accessibility,
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang=less>
|
|
|
+html {
|
|
|
+ scroll-behavior: smooth;
|
|
|
+}
|
|
|
+body {
|
|
|
+ background: #F6F6F6;
|
|
|
+}
|
|
|
+main {
|
|
|
+ width: 1396px;
|
|
|
+ background: #fff;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ padding: 57px 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ > nav {
|
|
|
+ counter-reset: h2Counter;
|
|
|
+ display: inline-block;
|
|
|
+ width: 397px;
|
|
|
+ vertical-align: top;
|
|
|
+ margin-right: 16px;
|
|
|
+ border: 1px solid #DEDEDE;
|
|
|
+ box-sizing: border-box;
|
|
|
+ a {
|
|
|
+ color: inherit;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ > h1 {
|
|
|
+ height: 95px;
|
|
|
+ line-height: 95px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid #DEDEDE;
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #36584C;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ > section {
|
|
|
+ padding: 36px 22px;
|
|
|
+ > h2 {
|
|
|
+ position: relative;
|
|
|
+ margin-left: 1em;
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #36584C;
|
|
|
+ margin-bottom: 21px;
|
|
|
+ counter-increment: h2Counter;
|
|
|
+ &:before {
|
|
|
+ content: counter(h2Counter) '.';
|
|
|
+ position: absolute;
|
|
|
+ margin-left: -1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > section {
|
|
|
+ counter-reset: h3Counter;
|
|
|
+ > h3 {
|
|
|
+ position: relative;
|
|
|
+ margin-left: 1em;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: SourceHanSansCN-Bold-GBpc-EUC-H;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #000000;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ counter-increment: h3Counter;
|
|
|
+ &:before {
|
|
|
+ content: counter(h3Counter) '.';
|
|
|
+ position: absolute;
|
|
|
+ margin-left: -1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .splitter {
|
|
|
+ margin: 0 27px;
|
|
|
+ height: 1px;
|
|
|
+ background: #36584C;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > article {
|
|
|
+ display: inline-block;
|
|
|
+ width: 942px;
|
|
|
+ vertical-align: top;
|
|
|
+ border: 1px solid #DEDEDE;
|
|
|
+ box-sizing: border-box;
|
|
|
+ counter-reset: h2Counter;
|
|
|
+ > h1 {
|
|
|
+ height: 95px;
|
|
|
+ line-height: 95px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 36px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 800;
|
|
|
+ color: #000000;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ > .splitter {
|
|
|
+ margin: 0 27px;
|
|
|
+ border-bottom: 1px dashed #36584C;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+ > section {
|
|
|
+ counter-reset: h3Counter;
|
|
|
+ margin: 35px 50px 35px 50px;
|
|
|
+ > h2 {
|
|
|
+ position: relative;
|
|
|
+ margin-left: 1em;
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: 800;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #000;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ counter-increment: h2Counter;
|
|
|
+ &:before {
|
|
|
+ content: counter(h2Counter) '.';
|
|
|
+ left: -1em;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > section {
|
|
|
+ margin-bottom: 25px;
|
|
|
+ > h3 {
|
|
|
+ position: relative;
|
|
|
+ margin-left: 1em;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-family: SourceHanSansCN-Bold-GBpc-EUC-H;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #000000;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ counter-increment: h3Counter;
|
|
|
+ &:before {
|
|
|
+ content: counter(h3Counter) '.';
|
|
|
+ position: absolute;
|
|
|
+ margin-left: -1em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ > ol {
|
|
|
+ counter-reset: h4Counter;
|
|
|
+ > li {
|
|
|
+ counter-increment: h4Counter;
|
|
|
+ font-size: 20px;
|
|
|
+ list-style: none;
|
|
|
+ margin-left: 1.2em;
|
|
|
+ margin-top: 1em;
|
|
|
+ &:before {
|
|
|
+ content: counter(h4Counter) ')';
|
|
|
+ position: absolute;
|
|
|
+ margin-left: -1.2em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > table {
|
|
|
+ border: 1px solid black;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-top: 18px;
|
|
|
+ > colgroup {
|
|
|
+ > col.effect {
|
|
|
+ background: #efefef;
|
|
|
+ }
|
|
|
+ > col.shortcut {
|
|
|
+ background: #f9f9f9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > tr {
|
|
|
+ > th, td {
|
|
|
+ border: 1px solid black;
|
|
|
+ text-align: center;
|
|
|
+ width: 25%;
|
|
|
+ padding: 0.5em 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
任一存
