6-1 全员通行-让每个用户都能无障碍访问网页

一号任务全员通行——让每个用户都能无障碍访问网页汇报人：xxx时间：2026任务说明01零号任务中已经确定初步的博客页面框架，并使用JavaScript来过滤和显示不同类别的博客内容；本任务通过应用函数与DOM操作等进一步完善博客页面，并遵循无障碍设计原则来添加无障碍访问功能，具体包括以下操作。（1）为页面添加字体一键放大或缩小的功能，用力单击该按钮时页面所有字体大小会随之改变。（2）为页面添加一键阅读功能，用力单击按钮后浏览器会朗读页面上的所有文本内容，包括图片的alt属性描述（即替代文本）。一号任务任务说明知识准备0201无障碍设计的基本概念03DOM操作与事件处理目录02对象与数组1.无障碍设计的基本概念知识准备无障碍设计（AccessibleDesign）指的是在设计网站和应用程序时，考虑到各种障碍类型（如视力、听力、行动、认知等）并采取措施，确保这些用户也能够轻松地访问和操作内容。无障碍设计的四大原则如表所示：原则内容可感知性（Perceivable）内容必须以用户能够感知的方式呈现给他们，无论其视觉、听觉或其他感知能力如何可操作性（Operable）用户应该能够通过多种方式操作页面，不仅限于鼠标操作。用户应能够使用键盘、触摸屏等设备进行交互可理解性（Understandable）网页内容应易于理解，并且用户能够理解如何与页面进行互动健壮性（Robust）网页应该能够在多种设备和浏览器上正常工作，且能够适应新的技术标准2.对象与数组知识准备对象是由一组键值对（Key-ValuePair）组成的数据结构。每个键（Key）是一个字符串或符号，而每个值（Value）可以是任意类型的数据，包括数字、字符串、布尔值，甚至是函数或其他对象。在JavaScript中，可以通过以下几种方式创建对象：1.使用Literalnotation对象字面量创建对象（最常用的方法）2.使用newObject()构造函数创建对象2.对象与数组知识准备对象是由一组键值对（Key-ValuePair）组成的数据结构。每个键（Key）是一个字符串或符号，而每个值（Value）可以是任意类型的数据，包括数字、字符串、布尔值，甚至是函数或其他对象。在JavaScript中，对象的操作与遍历是频繁的任务：2.对象与数组知识准备数组是一种用于存储多个值的数据结构。在JavaScript中，数组的元素是按顺序排列的，每个元素都有一个索引（Index），索引值从0开始。不同于其他编程语言，JavaScript数组中元素的数据类型不需要完全相同，可以包含任意类型的元素，如字符串、数字、布尔值，甚至是对象或另一个数组。也就是说，JavaScript数组中的元素数据类型可以是不一致的。在JavaScript中，可以通过以下几种方式创建数组：

为数组赋值（字面量）是最常用的创建数组方法：constfruits=["apple","banana","cherry"];使用newArray()构造函数创建数组：constfruits=newArray("apple","banana","cherry");在这个例子中，mixedArray包含了字符串、数字、布尔值、对象和另一个数组。这种灵活性为存储复杂数据结构提供了可能，使得JavaScript数组强大且通用。2.对象与数组知识准备数组是一种用于存储多个值的数据结构。在JavaScript中高效地访问、修改、添加、删除、遍历、查找数组等操作在日常开发中非常常用。3.DOM操作与事件处理知识准备DOM操作DOM是HTML和XML文档的编程接口。它将文档表示为一个由节点和对象组成的树形结构，DOM提供了丰富的API，用于创建、修改、删除和查询文档中的元素。开发者使用JavaScript通过DOMAPI来操作HTML和CSS代码，灵活地访问、修改和增强网页的内容与功能。3.DOM操作与事件处理知识准备事件处理是JavaScript与用户交互的核心机制。事件（Event）是指在文档或浏览器窗口中发生的一些特定的交互瞬间，例如单击按钮、鼠标指针悬停、键盘输入等。通过为元素绑定事件处理函数，可以实现对用户操作的响应。通过直接设置元素的事件属性来添加事件处理程序。这种方法简单且跨浏览器，但每个元素只能绑定一个事件处理程序。示例：常见的事件处理：任务实现03任务实现（1）获取当前字体值：使用getComputedStyle(root).fontSize获取。（2）通知屏幕阅读器：调用announceChange()函数通知屏幕阅读器字体大小的变化。（3）使用document.body.innerText获取页面中的所有文本内容。（4）使用document.querySelectorAll('img')选择所有图片元素。（5）创建一个S