10 cách tuyệt vời để làm cho nội dung của bạn dễ di chuyển và dễ tiếp cận

NộI Dung

• Khả năng tiếp cận không phải là một 'tính năng'
• Xác định nền tảng
• Giữ cho nội dung di động và có thể truy cập được
• 1. Bắt đầu với HTML5
• 2. WAI-ARIA
• 3. Sử dụng doctype
• 4. Các thẻ tài liệu HTML5
• 5. Liên kết xấu
• 6. Hình ảnh - ALT so với TITLE
• Cho mọi người biết
• Tóm lược
• Sự nhìn nhận
• Tài nguyên

Khi Kerie gõ trên iPhone, cô ấy trông giống như đang thổi sáo. Cô ấy giữ nó gần khuôn mặt của mình, và các ngón tay của cô ấy di chuyển với một tốc độ đáng kinh ngạc. Cô ấy viết xong và đưa cho tôi điện thoại của cô ấy để đọc tin nhắn cô ấy vừa gõ. Nó có chính tả và ngữ pháp hoàn hảo, đồng thời được nhập nhanh hơn nhiều so với những gì tôi có thể làm khi sử dụng bàn phím cảm ứng của iPhone.

Kerie sử dụng một ứng dụng có tên Fleksy để giúp cô di chuyển các ngón tay trên mặt điện thoại theo các mẫu có thể chuyển thành từ. Cô cũng đọc tin tức, nghe các ứng dụng radio, kiểm tra Twitter và tìm kiếm giờ tàu bằng điện thoại của mình. Cô ấy hoàn toàn bị mù.

'Xuất bản' có nghĩa là những thứ khác nhau đối với những người khác nhau. Đối với một số người, điều đó có nghĩa là sản xuất một khối lượng tác phẩm được in ra. Những người khác liên kết xuất bản với khả năng phân phối các tác phẩm đã viết qua các thiết bị và ứng dụng. Ngày càng thường xuyên hơn, mọi người nghĩ về việc xuất bản là cung cấp nội dung để thưởng thức ở bất kỳ định dạng nào, cho dù điều đó có nghĩa là đẩy một bài báo lên blog hoặc cập nhật một bài đăng trên Google Plus.

Thực tế là kỳ vọng khác nhau giữa những người dùng và những kỳ vọng này thay đổi theo thời gian. Những độc giả từng ngấu nghiến bài đăng mới nhất trên blog giờ đây mong rằng họ có thể đọc bài đăng trên blog đó, hoặc bất kỳ bài báo hoặc cuốn sách nào, bất cứ khi nào và bất cứ khi nào thuận tiện cho họ. Hôm nay nội dung theo dõi chúng ta từ một blog đến Reeder trên điện thoại đến Instapaper trên iPad đến phiên bản được gửi qua email qua Whispernet tới Kindle.

Quy trình đọc của mọi người là khác nhau và đối với những người yêu cầu các tính năng hỗ trợ tiếp cận như trình đọc màn hình, độ tương phản cao hoặc văn bản phóng to, quy trình công việc đó bị hỏng, đôi khi không thể sửa chữa được, khi tác giả và nhà xuất bản không xem xét các chi tiết định dạng nhỏ nhưng cần thiết. Đừng nghĩ về điều này là không 'kiểm tra hộp hỗ trợ tiếp cận'. Thay vào đó, hãy nhận ra rằng bạn đang biến nội dung của mình thành hộp đen cho nhiều khách hàng tiềm năng một cách hiệu quả.

Khả năng tiếp cận không phải là một 'tính năng'

Mặc dù đúng là các điều khiển có thể truy cập được sử dụng bởi những người bị suy giảm khả năng nghe và nhìn, nhưng có rất nhiều người khác cũng được hưởng lợi từ chúng. Một người nào đó có thị lực kém sẽ điều chỉnh kích thước phông chữ để đọc nội dung trên màn hình dễ dàng hơn. Một người mù màu đánh giá cao khả năng điều chỉnh bảng màu để những thứ như văn bản cảnh báo màu đỏ thực sự nổi bật. Những người đi làm dài sử dụng trình đọc màn hình để nghe các bài báo được đọc cho họ. Người không phải là người bản ngữ sử dụng video và âm thanh có phụ đề để giúp họ hiểu một ngôn ngữ mới. Tất cả các tình huống này đều thể hiện phạm vi rộng hơn cho nội dung của bạn, cải thiện trải nghiệm và sự đồng cảm của người dùng và thậm chí có thể tăng thêm doanh thu.

Để có cái nhìn tổng quan tuyệt vời về ý nghĩa của khả năng tiếp cận, hãy xem bài viết của Ian Hamilton.

Xác định nền tảng

Hãy bắt đầu với một số định nghĩa về những định dạng mà chúng ta có thể tập trung vào để làm cho nội dung của chúng ta dễ đọc hơn:

• HTML: Với HTML5, web thậm chí còn là một nơi tốt hơn để các nhà văn và nhà xuất bản giới thiệu tác phẩm của họ. Các thẻ mới như bài báo, phần, tiêu đề và chân trang hiện được triển khai trong nhiều trình duyệt và có thể được sử dụng một cách đáng tin cậy để thêm ngữ cảnh vào văn bản của bạn. Ngoài ra, mô-đun trang CSS3 sắp tới cũng có thể quan tâm đến những người đang tìm kiếm trải nghiệm đọc trang cố định hơn để kích hoạt.
• EPUB: EPUB là tiêu chuẩn chính thức của Diễn đàn Xuất bản Kỹ thuật số Quốc tế (IDPF). EPUB3 đã được phê duyệt vào tháng 10 năm 2011 và cho phép các ấn phẩm có nội dung tùy chỉnh và kiểu cách hơn, gần với những gì có khả năng với HTML / CSS hơn là các nguyên tắc tĩnh hơn trước đó.
• MOBI: MOBI, viết tắt của Mobipocket, là một định dạng được sử dụng bởi Kindle và các đầu đọc kỹ thuật số khác. Nó lại ít tùy biến hơn EPUB, nhưng chúng tôi đề cập đến nó ở đây vì bạn có thể sử dụng nó để xuất bản nội dung lên Amazon nếu bạn muốn. Theo Robin Christopherson của AbilityNet, một số mẫu Kindle có thể truy cập được cho người mù; tuy nhiên ứng dụng Kindle trên iOS thì không. KF8, định dạng mới của Kindle, hiện được Kindle Fire hỗ trợ và sẽ sớm được triển khai cho các thiết bị Kindle e-ink thế hệ mới nhất và các ứng dụng đọc sách Kindle.
• PDF: PDF đã trở thành một thực thể phổ biến trên web. Tôi đưa nó vào đây vì hầu hết các máy tính bảng đều có công nghệ tốt, được tích hợp sẵn để đọc các tệp PDF và kích hoạt công nghệ hỗ trợ với chúng. Với một tệp PDF, yếu tố quyết định là cách nó được tạo ra. Theo Alan Dalton, cố vấn phát triển khả năng tiếp cận tại Cơ quan Người khuyết tật Quốc gia Ireland, "Bạn có thể làm cho tệp PDF có thể truy cập được; tuy nhiên nhiều người không làm như vậy. Họ không nhận ra rằng các công cụ của họ đang tạo ra những sản phẩm tồi. Nếu tôi làm theo cách của mình, mọi thứ chúng tôi sẽ làm là HTML. " Điều hướng và khả năng truy cập sang một bên, các tệp PDF cũng không thích ứng tốt với các kích thước khác nhau và bất kỳ ai đã cố gắng đọc tệp PDF trên điện thoại thông minh đều quen thuộc với thao tác chụm, thu phóng và quét khó xử lý cần thiết để làm như vậy.

Những gì không thuộc danh mục này là các ứng dụng lấy nội dung của bạn và biến nó thành hình ảnh lớn. Mặc dù điều này có thể đảm bảo giao diện và phong cách giống nhau trên các nền tảng, nhưng bạn đang chặn rất nhiều khán giả của mình đồng thời tạo ra một lượt tải xuống rất lớn. Vấn đề này càng trở nên trầm trọng hơn khi chúng ta bắt đầu nói về màn hình Retina và hình ảnh có kích thước gấp đôi. Để biết cảm giác bị từ chối nội dung bạn muốn đọc (dù sao vẫn phải trả tiền), hãy xem nhận xét về việc các ứng dụng Newsstand hầu như không thể truy cập được qua VoiceOver trong iOS.

Để xem những loại tạp chí này trông như thế nào đối với một người dùng công nghệ dễ tiếp cận, hãy xem video nhúng của tôi, cho thấy trải nghiệm khó chịu khi cố gắng đọc những tạp chí này bằng
công cụ trợ năng như VoiceOver:

Giữ cho nội dung di động và có thể truy cập được

Tập trung vào các định dạng di động cho phép chúng tôi xử lý nội dung của mình để sống vui vẻ trên nhiều trình duyệt, điện thoại, thiết bị đọc kỹ thuật số và ứng dụng đọc. Chúng ta cần làm gì với nội dung của mình để đảm bảo nội dung có thể dịch tốt giữa các định dạng khác nhau này, đồng thời duy trì phong cách tùy chỉnh và trải nghiệm tuyệt vời?

Tôi đã tổng hợp một số nguyên tắc bên dưới cho những người muốn khán giả của họ càng rộng càng tốt và những người không muốn khóa nội dung của họ vào một hộp đen cho nhiều người dùng. Những kỹ thuật này có thể được áp dụng cho mọi thứ, từ các bài đăng trên blog, đến báo chí dạng dài, đến bất kỳ tác phẩm nào khác mà bạn đang xem xét tự xuất bản:

1. Bắt đầu với HTML5

Bằng cách tạo các tài liệu của bạn ban đầu bằng HTML5, bạn sẽ ít phải lo lắng về việc này hơn trong tương lai. Đánh dấu HTML5 sẽ giúp tài liệu của bạn dễ điều hướng và dịch sang các định dạng khác. Bạn sẽ ít 'chỉnh sửa lại' các ấn phẩm của mình thành các định dạng khác hơn nếu bạn có thông tin ngữ nghĩa trong đó ngay từ đầu.

2. WAI-ARIA

WAI-ARIA là Web Accessibility Initiative - Bộ ứng dụng Internet phong phú có thể truy cập. Đó là một tập hợp các nguyên tắc được tạo bởi Nhóm làm việc về Giao thức và Định dạng (PFWG) của
W3C. WAI-ARIA xác định một cách để làm cho nội dung web và ứng dụng dễ tiếp cận hơn đối với người khuyết tật, đồng thời, nó giúp cho nội dung động và các điều khiển giao diện người dùng nâng cao được phát triển bằng Ajax, HTML, JavaScript và các công nghệ liên quan. Một số kỹ thuật trong bài viết này đến từ các nguyên tắc của WAI-ARIA và mặc dù bài viết này không đủ dài để trình bày tất cả các thông số kỹ thuật, tôi khuyên bạn nên xem nó để biết thêm chi tiết về lý do tại sao chúng được khuyến nghị và các phương pháp hay nhất cho thực hiện chúng.

3. Sử dụng doctype

Mặc dù bản thân việc sử dụng một loại tài liệu cụ thể không ảnh hưởng đến khả năng truy cập của mã HTML được liên kết, nhưng lý do quan trọng để sử dụng loại tài liệu là để đảm bảo rằng chế độ kỳ quặc của trình duyệt không được kích hoạt. Đơn giản chỉ cần sử dụng ! DOCTYPE html> để đảm bảo điều đó không xảy ra.

4. Các thẻ tài liệu HTML5

Điều hướng thích hợp của một tài liệu sẽ đánh giá cao chỉ số khả năng truy cập của nó. Nhiều người dùng công nghệ có thể truy cập mà tôi đã phỏng vấn bày tỏ sự thất vọng của họ với các nhà cung cấp nội dung và nhà phát triển không đánh dấu đúng tài liệu của họ về khả năng điều hướng. Các thẻ này cung cấp nhiều ngữ cảnh hơn cho các phần trong tài liệu của bạn hơn là sử dụng nhiều div.

• Tiêu đề và Chân trang cả hai đều có thể được sử dụng nhiều lần trong một trang. Chúng có thể biểu thị đầu trang hoặc chân trang chính tương ứng của tài liệu hoặc chúng có thể được sử dụng cho thông tin đầu trang / chân trang trong các bài báo hoặc phần.
• Qua một bên là một thẻ tốt để sử dụng cho các phần, chẳng hạn như thanh bên trong sách, bổ sung cho tài liệu nhưng không hoàn toàn quan trọng đối với sự hiểu biết của nó.
• Phần là những cách chia nhỏ các ý tưởng hoặc nhóm các nội dung lại với nhau sao cho hợp lý.
• Bài viết là các phần độc lập, độc lập có thể tồn tại mà không có phần còn lại của nội dung. Sử dụng các thẻ này một cách thích hợp giúp đảm bảo cấu trúc nội dung của bạn được diễn giải chính xác.

5. Liên kết xấu

Với CSS, có thể sử dụng hình nền trên các liên kết và nút. Đây là một hiệu ứng tốt cho các nhà thiết kế web vì nó cho phép kiểm soát nhiều hơn đối với kiểu chữ. Tuy nhiên, nó đã dẫn đến việc mọi người quên bao gồm mô tả văn bản. Đảm bảo rằng ngay cả khi bạn cũng đang sử dụng văn bản trong hình ảnh để đảm bảo rằng nó vẫn có thể truy cập được. Điều này cũng có thể ảnh hưởng đến những thứ như SEO và
quốc tế hóa.

Thí dụ:

a href = "/ contact"> / a>

Điều này thật tệ.

a href = "/ contact"> Liên hệ với chúng tôi / a>

Tốt hơn nhiều.

6. Hình ảnh - ALT so với TITLE

Mọi người thường bao gồm một trong hai alt hoặc là tiêu đề các thuộc tính trong hình ảnh của chúng, nhưng không phải cả hai vì chúng thường bị hiểu nhầm và do đó dường như là thừa. Để giải tỏa sự nhầm lẫn, tiêu đề có thể đại diện cho thông tin tư vấn, chẳng hạn như thông tin có thể xuất hiện trong chú giải công cụ. Điều này cũng có thể cung cấp cho bạn thông tin bổ sung khi bạn di chuột qua hình ảnh, một kỹ thuật mà nhiều người sử dụng trên blog của họ. Tuy nhiên, với sự phát triển của các thiết bị cảm ứng, loại thông tin này trở nên ít hữu ích hơn.

Alt mặt khác được sử dụng bởi công nghệ hỗ trợ và cung cấp ngữ cảnh cho phần tử. Bạn phải dùng alt trên hình ảnh của bạn và đảm bảo rằng đó là thông tin hữu ích. Sử dụng img alt = "" src = "1348.webp">

Cho mọi người biết

Nếu nội dung của bạn có sẵn ở nhiều định dạng, hãy đảm bảo rằng có một cách để khám phá điều này trên trang web của bạn. Có thể bạn đã thấy thông báo "Nếu bạn gặp khó khăn khi xem email này, hãy đọc trực tuyến
phiên bản "ở đầu nhiều bản tin email. Hãy thực hành điều tương tự cho nội dung của bạn. Nếu bạn có tệp PDF có thể truy cập hoặc phiên bản âm thanh cũng như ePub, hãy đảm bảo rằng người dùng có thể tìm thấy thông tin đó. Làm người dùng kiểm tra để đảm bảo nội dung có thể tìm thấy và đọc được.