Chào mừng bạn trở lại.
Trong bài giảng này, chúng ta sẽ nói về điều hướng có thể truy cập.
Tôi biết rằng khóa học này chủ yếu là về CSS, nhưng tôi luôn muốn bật và
nhắc nhở bạn về những điều khác nhau bạn cần phải suy
nghĩ khi bạn đang tạo kiểu trang của bạn.
Điều hướng thực sự là khía cạnh quan trọng nhất của khả năng truy cập.
Nếu mọi người không thể điều hướng qua trang của bạn và truy cập vào nội dung họ thực sự cần
để truy cập, thì bạn thực sự chỉ lãng phí thời gian của họ và một số của bạn.
Vì vậy, được trích dẫn người dùng có những thứ đã thử và thực sự mà họ tìm kiếm
trên một trang.
Họ biết hộp tìm kiếm là gì.
Họ biết biểu ngữ thường đi đâu.
Nơi điều hướng chính là.
Và nó không đáng ngạc nhiên với họ rằng thường là nội dung chính,
trong những gì chúng tôi gọi là nội dung tốt, được ẩn xuống dưới trong một trang.
Và chúng ta biết điều này bởi vì chúng ta có thể nhìn thấy nó ngay khi chúng ta mở trình duyệt.
Nhưng đối với người dùng mù hoặc tầm nhìn thấp, họ thực sự cần phải
dựa vào mã hóa thích hợp của trang để có được những gì họ muốn đạt được.
Và không chỉ là mã hóa thích hợp, nhưng
có rất nhiều vấn đề phong cách bạn cần phải suy nghĩ khi bạn đang làm điều này.
Vậy nếu anh không thể nhìn thấy thì sao?
Nơi đầu tiên mà bạn nhận được thông tin là từ tiêu đề của trang.
Bạn muốn chắc chắn rằng tiêu đề của bạn ngắn nhưng
cũng cho phép người dùng biết trang này khác với các trang khác tại trang web của bạn như thế nào.
Tiếp theo, vị trí đầu đề thích hợp, và loại cấu trúc phân cấp này,
cho phép người dùng màn hình bỏ qua các liên kết điều hướng khác nhau và truy
cập trực tiếp đến những gì họ đang tìm kiếm.
Tôi nghĩ tất cả các bạn đã đến những trang web mà nó cảm thấy như bạn cần phải đi đến một nơi và
sau đó bạn đi theo một nơi khác và bạn đi theo một nơi khác.
Và điều này có thể thực sự gây phiền nhiễu và khó chịu.
Đặc biệt là nếu nó thực sự quan trọng là con chuột của bạn đang ở đúng vị trí.
Vì vậy, chúng tôi muốn đảm bảo rằng chúng tôi cho phép trình đọc màn hình và
những người dùng khác bỏ qua ngay đến nơi họ muốn đi.
Chúng tôi cũng muốn suy nghĩ về các liên kết của bạn.
Bởi vì khi bạn có các liên kết đến các trang web khác nhau trong trang của bạn,
những mô tả đó là tất cả những gì mọi người có cho chúng.
Vì vậy, bạn không muốn sử dụng Click Me, Follow Me Here.
Bạn muốn cung cấp thông tin tốt trong các mô tả liên kết đó.
Tiếp theo, chúng ta cần nói về hệ thống phân cấp tiêu đề phù hợp, được chứ?
Đầu đề cần được lồng nhau để thực sự cung cấp cấu trúc, vì vậy
bạn không nên có đầu đề h3 trước khi bạn có đầu đề h2.
Bạn chỉ nên có một tiêu đề h1.
Bạn không nên nhảy từ h2 đến h4.
Thay vào đó, bạn thực sự muốn làm theo một loại trật tự nhất định để
mọi người có thể nhận ra rằng có ý nghĩa đằng sau trang của bạn.
Đây là một ví dụ ở đây.
Tôi có tiêu đề h1 duy nhất của tôi, và sau đó trong trang này,
tôi có thể tưởng tượng rằng tôi có ba phần.
Mỗi một trong những phần đó có một tiêu đề h2 bên trong nó.
Và trong phần đầu tiên của tôi, nó có thể là tôi có những điểm đầu dòng nhỏ nhất định
hoặc những điểm khác tôi đang thực hiện, nơi họ đủ quan trọng mà tôi đã quyết định hey,
Tôi sẽ sử dụng h3 để biểu thị rằng đây là một phần phụ trong phần của tôi.
Nơi mọi người gặp rắc rối và những gì bạn nhìn thấy tất cả các thời gian, là mọi người quyết định,
Tôi thực sự thích cái nhìn của phông chữ h2 đó.
Tôi thích văn bản lớn như thế nào.
Tôi thích làm thế nào các loại phông chữ họ sử dụng, vì vậy tôi chỉ sẽ đưa
càng nhiều thứ như tôi có thể vào phông chữ h2 vì tôi thích cách nó trông.
Và họ không nghĩ về ngữ nghĩa.
Điều tương tự xảy ra với phông chữ h3.
Bạn sẽ đi đến trang của ai đó và tìm ra không có phông chữ h2 ở tất cả.
Thay vào đó, đó là tất cả các yếu tố h3, và
họ chỉ làm điều đó bởi vì họ thích giao diện của thẻ cụ thể đó.
Vì vậy, bây giờ, đây là nơi phong cách đi vào,
đây là lý do tại sao tôi đang nói về điều này trong lớp tạo kiểu.
Đó là bây giờ bạn biết rằng thay vào đó, nếu bạn thực sự thích giao diện của tiêu đề h3 đó,
thay vì sử dụng thẻ, bạn nên tạo kiểu thẻ khác để sao chép giao diện đó.
Tìm hiểu họ sử dụng phông chữ nào.
Tìm hiểu kích thước phông chữ nào.
Cứ lặp lại đi.
Không sử dụng thẻ chỉ vì bạn thích cách họ trông.
Một điều khác bạn có thể nghĩ đến để giúp điều hướng,
là ý tưởng về các tiêu đề ngoài trang.
Nó rất hữu ích để làm khi bạn muốn cung cấp cho người dùng trình đọc màn hình một số loại
trợ giúp điều hướng, nhưng bạn không muốn đặt nó ngay trong trang và
có người dùng nhìn thấy của bạn cũng phải đối phó với nó tất cả các thời gian.
Vì vậy, để tôi cho các bạn một ví dụ về điều này.
Chúng tôi sẽ sử dụng bảng tạo kiểu để cơ bản thiết lập một cái gì đó offpage,
chúng tôi đã cho nó tên offpage, và chúng tôi đã nói
, hey, Tôi muốn đặt điều này ở một vị trí tuyệt đối bên trái bởi -1000px.
Vì vậy, bạn sẽ biết rằng nó là khá xa.
Tôi có ở đây trang Nhân sự của Đại học Michigan.
Và nếu bạn nhìn lên gần đỉnh, thực sự không có gì
ở đó, ở góc trên này.
Nhưng điều tôi sẽ làm là tôi sẽ đi trước và đánh vào Tab.
Và, những gì Tab làm, là nó mang yếu tố tiếp theo vào tiêu điểm.
Vậy, đi tiếp và Tab, ở đó.
Và bạn có thể thấy,
rằng bây giờ, có một điều mới ở đây nói Chuyển đến nội dung chính.
Nếu tôi bấm vào nó, tôi đi xuống tất cả các con đường, và tôi đã có thể
bỏ qua rất nhiều thông tin bổ sung mà họ không thực sự cần phải xem.
Nó chỉ là tiếp thị và những thứ khác nhau như thế.
Vì vậy, các liên kết điều hướng ngoài màn hình khác nhau này cực kỳ hữu ích
để cho phép mọi người nhảy ngay lập tức đến những gì họ muốn đạt được.
Tuy nhiên, bằng cách sử dụng kiểu dáng,
chúng tôi đã lấy nó ra khỏi trang mà bạn chỉ sử dụng nó nếu bạn thực sự muốn.
Một trong những điều tôi muốn đề cập đến là, nếu bạn định làm các tiêu đề ngoài trang,
không sử dụng {display: none} hoặc {visibility: hidden}.
Những thực sự chỉ là loại lộn xộn với mã và làm cho nó rất khó khăn cho trình
đọc màn hình hoặc những người khác nhìn vào mã của bạn để xem những gì đang xảy ra.
Khi bắt đầu bài giảng, tôi đã đề cập rằng văn bản liên kết có ý nghĩa là
rất quan trọng đối với
khả năng truy cập bởi vì trình đọc màn hình có thể tìm và liệt kê tất cả các liên kết.
Bây giờ, những gì bạn có thể không nhận ra là cách mà các liên kết được hiển thị
có thể không theo cách bạn mong đợi.
Vì vậy, chúng có thể nằm ngoài bối cảnh.
Bạn chỉ có thể truy cập chúng thông qua tab hoặc
chúng có thể được trình bày trong một danh sách.
Vì vậy, bạn thực sự muốn tránh sử dụng những thứ như bấm vào đây, đọc này và nhiều hơn nữa.
Lý do là,
có lẽ là bối cảnh duy nhất một số người nhận được để đi đến các liên kết.
Ngoài ra, xin vui lòng không sử dụng URL như một mô tả liên kết.
Nó khá phổ biến để truy cập một trang web và bạn có thể thấy nhấp vào đây, và
họ có toàn bộ URL, www.umich.ed/etc.
Nó có thể trông rất mô tả, nhưng nếu bạn phải lắng nghe mô tả,
nó có thể rất khó hiểu.
Thay vào đó, trừ khi bạn có một URL rất ngắn, hãy tiếp tục và
sử dụng một số loại mô tả văn bản.
Vì vậy, chỉ để xem xét, hãy suy nghĩ về những gì chúng ta đã học được ngày hôm nay.
Khi bạn hoàn thành việc tạo trang của mình, nó không đủ để nó trông đẹp.
Bạn cần phải suy nghĩ về việc điều hướng trang của bạn dễ dàng như thế nào.
Hãy suy nghĩ về điều gì sẽ xảy ra nếu màu sắc không có ở đó, hoặc
nếu ai đó chỉ có thể điều hướng đến trang của bạn bằng chuột.
Vì vậy, tôi muốn bạn thực sự nhanh chóng những gì tôi đang nói về ở đây.
Đây là một trang cũ của tôi, và, ở phía dưới, tôi có Đại học Michigan.
Tôi chỉ muốn cho bạn thấy điều gì sẽ xảy ra khi tôi lấy đi phong cách.
Trang bây giờ, bạn thậm chí không thể nhìn thấy văn bản nữa.
Đây là những điều nhỏ mà bạn sẽ không bao giờ nhận thấy
trừ khi bạn đã kiểm tra trang của bạn cả có và không có kiểu dáng.
Vì vậy, khi bạn lên kế hoạch cho trang của mình, hãy đảm bảo rằng bạn đang lên kế hoạch cho tất cả mọi người.
Tận dụng tuyệt vời các tiêu đề.
Sử dụng tuyệt vời các văn bản liên kết.
Và đảm bảo rằng bạn đang cung cấp cho mọi người các công cụ họ cần để điều hướng trang của bạn
thành công.
Cảm ơn.