Nếu bạn đã từng làm việc hoặc xây dựng một trang web đa ngôn ngữ, bạn sẽ biết có một triệu lẻ một điều cần ghi nhớ. Sắp xếp tên miền, cấu hình máy chủ web, cấu trúc URL, bố cục trang và dịch nội dung có khả năng cao trong danh sách 'việc cần làm' của bạn
Với tất cả những điều khiến bạn bận rộn, việc đáp ứng các yêu cầu về khả năng truy cập cho trang web của bạn có thể trượt xuống đáy đống. Đây không phải là trường hợp vì làm cho trang web đa ngôn ngữ của bạn có thể truy cập dễ dàng đạt được
Trang web đa ngôn ngữ là gì?
Trang web đa ngôn ngữ là trang web có nội dung được viết bằng nhiều ngôn ngữ. Thông tin hiển thị bằng các ngôn ngữ khác nhau thường giống nhau, nhưng có thể được điều chỉnh cho các đối tượng khác nhau. Đặt trước. com là một ví dụ về trang web đa ngôn ngữ vì nội dung của nó có sẵn bằng 35 ngôn ngữ khác nhau
Đặt trước. trang chủ com hiển thị bằng tiếng Anh [trái] và tiếng Bồ Đào Nha [phải]
1. Mã ngôn ngữ
Điều đầu tiên cần làm đúng khi làm việc với nhiều ngôn ngữ trên một trang web là đảm bảo rằng ngôn ngữ được xác định trong mã của trang. Nguyên tắc truy cập nội dung web yêu cầu theo tiêu chí thành công 3. 1. 1 Ngôn ngữ của trang đó
Ngôn ngữ con người mặc định của mỗi trang Web có thể được xác định theo chương trình
Các công nghệ hỗ trợ như trình đọc màn hình và thiết bị chữ nổi không thể tự động xác định ngôn ngữ đang được sử dụng trên trang web chỉ từ văn bản. Ngôn ngữ phải được xác định trong mã của trang để các công nghệ hỗ trợ diễn giải ngôn ngữ đó một cách chính xác. Sau khi được nhận dạng, các công nghệ này có thể tự động chuyển sang ngôn ngữ đó, điều chỉnh giọng, cao độ và tốc độ nói của nội dung tùy thuộc vào ngôn ngữ được đề cập. Trình đọc màn hình hiện đại như Jaws và Window Eyes có thể nói nhiều ngôn ngữ bằng giọng thích hợp với cách phát âm chuẩn
Đặt ngôn ngữ chính
Trước hết, bạn sẽ cần chọn ngôn ngữ chính cho các trang của mình. Đây là ngôn ngữ mà phần lớn nội dung của bạn được viết bằng. Ví dụ: nếu trang của bạn chủ yếu được viết bằng tiếng Anh thì ngôn ngữ chính của bạn phải được đặt là tiếng Anh
Khi ngôn ngữ chính của các trang của bạn đã được chọn, bạn sẽ cần tìm mã ngôn ngữ tương ứng với ngôn ngữ đó. Mã ngôn ngữ thường bao gồm hai chữ cái, tuy nhiên mã bốn chữ cái có thể được sử dụng để xác định thêm ngôn ngữ thành các phương ngữ khác nhau
Mã ngôn ngữ gồm hai chữ cái 'en' có thể được sử dụng để xác định 'tiếng Anh', trong khi mã ngôn ngữ bốn chữ cái 'en-GB' có thể được sử dụng để phân biệt tiếng Anh Anh với tiếng Anh Mỹ 'en-US'. Xin lưu ý 'en-UK' không phải là mã ngôn ngữ gồm bốn chữ cái hợp lệ. Tiếp theo, chúng ta cần áp dụng mã ngôn ngữ cho trang của mình
Để đặt ngôn ngữ chính của trang là tiếng Anh, chúng tôi sử dụng thuộc tính 'lang' cùng với mã ngôn ngữ 'en' và áp dụng mã này cho phần tử HTML ở đầu mỗi trang
Nếu bạn đang sử dụng XHTML, bạn sẽ cần áp dụng một thuộc tính bổ sung để đặt ngôn ngữ được sử dụng trong tài liệu XML. 'xml. thuộc tính lang' phục vụ cùng một mục đích như thuộc tính 'lang' và nên sử dụng cùng một mã ngôn ngữ. Các trang của bạn sẽ không vượt qua kiểm tra xác thực HTML của W3C nếu không có thuộc tính này
Đối với một trang web đa ngôn ngữ bao gồm các trang tiếng Anh, tiếng Pháp và tiếng Đức, nên đặt lại ngôn ngữ chính cho từng ngôn ngữ
Ngôn ngữ chính của trang phải tương ứng với ngôn ngữ của con người trên trang
Sử dụng mã ngôn ngữ sai
Nếu bạn không cung cấp mã ngôn ngữ chính hoặc đặt mã không chính xác thì người nào đó sử dụng trình đọc màn hình hoặc thiết bị chữ nổi sẽ không thể hiểu được nội dung. Nếu ngôn ngữ chính của trang web chưa được xác định, phần mềm đọc màn hình nói chung sẽ đọc to nội dung bằng ngôn ngữ giống như cài đặt mặc định cho trình đọc màn hình
Vì vậy, nếu trình đọc màn hình của bạn được đặt tiếng Anh làm ngôn ngữ mặc định, thì trình đọc màn hình sẽ đọc nội dung trang web bằng tiếng Anh. Đây không phải là vấn đề quá lớn nếu bạn chỉ xem các trang web được viết bằng tiếng Anh
Tuy nhiên, nếu trang sử dụng sai mã ngôn ngữ, chẳng hạn như nếu nội dung được viết bằng tiếng Anh, nhưng được xác định trong mã là tiếng Pháp, trình đọc màn hình sẽ cố gắng đọc nội dung tiếng Anh bằng giọng và cách phát âm tiếng Pháp. Đối với những người đã quen thuộc với 'Allo Allo', trang web của bạn có thể trông giống như Sĩ quan Crabtree, bên dưới. Mặc dù thú vị nhưng điều này có thể không dễ hiểu lắm
2. Đa ngôn ngữ
Phần lớn các trang web sử dụng một ngôn ngữ tại một thời điểm, tuy nhiên, có thể có những lúc bạn muốn đưa một ngôn ngữ khác ngôn ngữ chính vào các trang của mình. Nếu đây là trường hợp, tiêu chí thành công Nguyên tắc truy cập nội dung web 3. 1. 2 Ngôn ngữ của các bộ phận yêu cầu rằng
Ngôn ngữ của con người trong mỗi đoạn văn hoặc cụm từ trong nội dung có thể được xác định theo chương trình ngoại trừ tên riêng, thuật ngữ kỹ thuật, từ của ngôn ngữ không xác định và từ hoặc cụm từ đã trở thành một phần của ngôn ngữ bản địa của văn bản xung quanh ngay lập tức
Nếu bạn muốn đưa một đoạn văn bằng tiếng Pháp vào trang của mình, bạn cần sử dụng thuộc tính 'lang' để đánh dấu sự thay đổi ngôn ngữ. Thuộc tính 'lang' có thể được sử dụng với hầu hết mọi phần tử HTML, giúp dễ dàng thay đổi ngôn ngữ trong một trang. Để bao gồm một trích dẫn tiếng Pháp trên một trang tiếng Anh, bạn chỉ cần thêm thuộc tính lang vào thẻ blockquote
Le plus grand faible des hommes, c'est l'amour qu'ils ont de la vie.
liên kết
Nếu bạn đang tạo một trang web đa ngôn ngữ, bạn cũng có thể cần cung cấp liên kết đến các phiên bản ngôn ngữ khác của trang web của mình. Nếu trang bạn đang liên kết được viết bằng một ngôn ngữ khác với trang hiện tại, bạn cần cho những người sử dụng công nghệ hỗ trợ biết về điều này. Điều này có thể được thực hiện bằng cách sử dụng thuộc tính 'hreflang'
Thuộc tính 'hreflang' cho phép bạn thông báo cho mọi người ngôn ngữ chính của trang được tìm thấy khi nhấp vào liên kết khác với trang hiện tại. Ví dụ: để liên kết đến một trang viết bằng tiếng Pháp từ một trang viết bằng tiếng Anh, bạn sẽ sử dụng
FrenchNếu bạn cần xác định cả văn bản của liên kết và các liên kết nhắm mục tiêu là các ngôn ngữ khác nhau, bạn cần sử dụng cả thuộc tính 'lang' và 'hreflang'
FrancaisXin lưu ý rằng chỉ nên sử dụng thuộc tính 'hreflang' cho các liên kết
3. Google và nhận dạng ngôn ngữ
Không giống như các công nghệ hỗ trợ như trình đọc màn hình, Google không nhận dạng các mã định danh ngôn ngữ, chẳng hạn như thuộc tính 'lang' trong mã của trang. Google cố gắng tự tìm ra ngôn ngữ chính cho các trang của bạn. Để giúp Google nhận dạng ngôn ngữ dễ dàng hơn, Google khuyên bạn chỉ nên sử dụng một ngôn ngữ trên mỗi trang
4. hướng ngôn ngữ
Nếu bạn đang tạo một trang web đa ngôn ngữ phục vụ cho các ngôn ngữ được viết từ phải sang trái thay vì từ trái sang phải, bạn sẽ cần đảm bảo rằng hướng của văn bản được chỉ định chính xác trong mã của trang. Bạn có thể đặt hướng của văn bản bằng cách sử dụng thuộc tính 'dir' trên phần tử HTML. Đối với các ngôn ngữ như tiếng Ả Rập, tiếng Ba Tư và tiếng Urdu, thuộc tính 'dir' phải được đặt thành rtl [từ phải sang trái]
Thuộc tính 'dir' không cần thiết cho các trang được viết bằng ngôn ngữ viết từ trái sang phải như tiếng Anh vì đây là hướng văn bản mặc định. Các bố cục trang khác nhau thường được yêu cầu cho các ngôn ngữ viết từ phải sang trái, vì hầu hết các ngôn ngữ viết từ phải sang trái phải được căn phải thay vì căn trái
Điều này có nghĩa là bố cục trang sẽ cần được điều chỉnh cho phù hợp với các ngôn ngữ này, về cơ bản phản ánh bố cục của các trang ngôn ngữ từ trái sang phải. Ví dụ: trang web của Liên Hợp Quốc điều chỉnh bố cục của nó cho ngôn ngữ Ả Rập được viết từ phải sang trái. Toàn bộ bố cục của trang bị đảo ngược khi so sánh với phiên bản tiếng Anh. Những loại thay đổi bố cục này có thể đạt được bằng CSS
Bố cục của các trang Liên Hợp Quốc thay đổi tùy thuộc vào ngôn ngữ được sử dụng
5. Mã hóa ký tự
Mã hóa ký tự về cơ bản là chìa khóa để giải mã một tập hợp các chữ cái và ký hiệu được mã hóa được sử dụng trong một hệ thống chữ viết. Có nhiều loại mã hóa ký tự khác nhau, vì vậy điều thực sự quan trọng là đảm bảo bạn sử dụng đúng mã hóa ký tự, nếu không mọi người có thể không đọc được văn bản trên các trang của bạn
Mã hóa ký tự cũng giúp máy tính hiểu thông tin của bạn, nếu bạn sử dụng mã hóa sai, một số công cụ tìm kiếm có thể không tìm thấy các trang của bạn. Mã hóa ký tự được sử dụng rộng rãi nhất là 'Unicode'. 'Unicode' chứa các ký tự cho hầu hết các ngôn ngữ và tập lệnh trên thế giới và được hỗ trợ trên một số lượng lớn hệ điều hành
Điều này có nghĩa là Unicode có thể hiển thị nhiều ngôn ngữ và tập lệnh trong một trang, khiến nó trở thành lựa chọn tuyệt vời để sử dụng cho các trang web đa ngôn ngữ. Để chỉ định Unicode cho các trang được viết bằng HTML 4, hãy đặt dòng sau vào đầu trang của bạn
Để sử dụng HTML 5
Vui lòng xem 'Khai báo mã hóa ký tự trong HTML' để biết thêm thông tin về mã hóa ký tự
6. Cỡ chữ
Khi thiết kế trang web đa ngôn ngữ của bạn, điều quan trọng là phải nhận ra rằng kích thước phông chữ bạn chọn cho ngôn ngữ mặc định của mình có thể không phù hợp với tất cả các ngôn ngữ. Các ngôn ngữ khác nhau như tiếng Trung, tiếng Nhật và tiếng Ả Rập có thể khó đọc ở cỡ chữ phù hợp với tiếng Anh, tiếng Pháp và tiếng Đức. Đối với các trang web hiển thị ngôn ngữ tiếng Trung, tiếng Nhật hoặc tiếng Ả Rập, kích thước phông chữ mặc định sẽ cần được tăng lên để văn bản có thể đọc được trên màn hình
Có hai cách để đạt được điều này. Cái đầu tiên sử dụng lớp giả CSS 'lang' để đặt các kích thước phông chữ và họ phông chữ khác nhau tùy thuộc vào giá trị của thuộc tính 'lang'. HTML
or CSS
:lang[en] {
font-size: 85%;
font-family: arial, verdana, sans-serif;
}
:lang[zh] {
font-size: 125%;
font-family: helvetica, verdana, sans-serif;
}
Kỹ thuật này được hỗ trợ trong Firefox, Opera và Internet Explorer 8 trở lên. Chrome và Safari không hỗ trợ lớp giả này. Nếu bạn cũng muốn hỗ trợ các trình duyệt web-kit và các phiên bản Internet Explorer cũ hơn, tùy chọn thứ hai sẽ là sử dụng các lớp trên phần tử nội dung cho từng ngôn ngữ được yêu cầu. HTML
________số 8CSS
.english {
font-size: 85%;
font-family: arial, verdana, sans-serif;
}
.chinese {
font-size: 125%;
font-family: helvetica, verdana, sans-serif;
}
7. Độ dài của từ
Độ dài của từ khác nhau giữa các ngôn ngữ. Nội dung được viết bằng một ngôn ngữ có thể chiếm nhiều hoặc ít không gian trên trang hơn ngôn ngữ khác. Thiết kế của trang web phải phục vụ cho các từ có độ dài khác nhau được sử dụng thông qua trang web. Lấy Amazon làm ví dụ, độ dài của nội dung trong thanh tìm kiếm của trang web khác nhau giữa các ngôn ngữ. Từ 'tìm kiếm' chiếm 10 ký tự trong tiếng Pháp nhưng chỉ có hai ký tự trong tiếng Nhật. Từ 'giỏ' chiếm 6 ký tự trong tiếng Anh nhưng khi dịch sang tiếng Đức chiếm tới 13 ký tự. Amazon đã điều chỉnh thiết kế của khu vực này trên các trang của họ, loại bỏ nút danh sách mong muốn khỏi thanh tìm kiếm đối với những ngôn ngữ sử dụng các từ dài hơn như tiếng Đức và tiếng Ý
Các ngôn ngữ khác nhau chiếm lượng không gian khác nhau trên trang
Tùy thuộc vào nội dung trên trang web đa ngôn ngữ của bạn, có thể không thay đổi được bố cục và thiết kế trang web của bạn theo cách này. Bạn có thể khắc phục các loại sự cố này bằng cách sử dụng các từ ngắn hơn để phù hợp với không gian có sẵn trên trang của mình và đảm bảo rằng bạn đã dịch nội dung của mình trước khi đưa ra các quyết định thiết kế cần thiết
Nomensa là một công ty thiết kế UX từng đoạt giải thưởng có văn phòng tại Bristol, London và Amsterdam. Nếu bạn muốn tìm hiểu thêm về các dịch vụ hỗ trợ truy cập web mà chúng tôi cung cấp, hãy gọi cho chúng tôi theo số 01179 297 333 hoặc chúng tôi sẽ liên hệ lại với bạn.